blocks|key|1187493|text|您可以将HTML+table转换为不同的呈现，例如设置|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1187494|table+{+display:+block;+}
tr+{+display:+table;+}
th,+td+{+display:+table-row;+}+|code-block|syntax|javascript|1187495|这将导致一个完全垂直的表示。|1187496|当然，细节取决于标记和所需的呈现。|1187497|entityMap^0|9|5|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|V|8|@]|D|@]|E|$]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

You can turn an HTML <code>table</code> to different rendering, e.g. setting

<pre><code>table { display: block; }
tr { display: table; }
th, td { display: table-row; } 
</code></pre>

This would cause a completely vertical presentation.

The details of course depend on the markup and on the desired rendering.

blocks|key|1665529|text|您可以使用手持特定样式表属性media="screen+and+(max-device-width:+/*+whatever+*/)"转换相同的块，如下所示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1665530|<link+rel="stylesheet"+href="whatever.css"+type="text/css"+media="screen+and+(max-device-width:+/*+whatever+*/)">|code-block|syntax|javascript|1665531|或者您可以在样式表中使用@media。|1665532|@media+only+screen+and+(max-device-width:+/*+whatever+*/)+{
++++/*+Styles+goes+here+*/
}|1665533|媒体信息|1665534|我刚刚看到了nike.com的来源，他们正在为ipad.css样式表使用样式表属性，看一看。|blockquote|1665535|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3.org/TR/css3-mediaqueries/|1|http://www.nike.com/in/en_gb/^0|E|1H|0|0|C|6|0|0|0|4|0|0|6|8|1|0^^$0|@$1|2|3|4|5|6|7|13|8|@$9|14|A|15|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|16|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|17|8|@$9|18|A|19|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|1A|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|1B|8|@]|D|@$9|1C|A|1D|1|1E]]|E|$]]|$1|Q|3|R|5|S|7|1F|8|@]|D|@$9|1G|A|1H|1|1I]]|E|$]]|$1|T|3|-4|5|6|7|1J|8|@]|D|@]|E|$]]]|U|$V|$5|W|X|Y|E|$Z|10]]|11|$5|W|X|Y|E|$Z|12]]]]

You can convert the same block using handheld specific stylesheet attribute <code>media="screen and (max-device-width: /* whatever */)"</code> like this :

<pre><code>&lt;link rel="stylesheet" href="whatever.css" type="text/css" media="screen and (max-device-width: /* whatever */)"&gt;
</code></pre>

Or you can use <code>@media</code> inside your stylesheet

<pre><code>@media only screen and (max-device-width: /* whatever */) {
 /* Styles goes here */
}
</code></pre>

<a href="http://www.w3.org/TR/css3-mediaqueries/" rel="nofollow">Media Info</a>

<blockquote>
 P.S I just saw the source of <a href="http://www.nike.com/in/en_gb/" rel="nofollow">nike.com</a>, they are using the
 stylesheet attribute for ipad.css stylesheet, have a look.
</blockquote>

blocks|key|1187481|text|如果CSS3是可接受的，则可以使用媒体查询为不同的维度和设备创建不同的样式。您可以以这种方式创建难以置信的动态站点。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1187482|entityMap|0|LINK|mutability|MUTABLE|url|http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/^0|H|4|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

If CSS3 is acceptible, you can use <a href="http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/" rel="nofollow">media queries</a> to create different styles for different dimensions and devices. You can create incredibly dynamic sites in this way.

blocks|key|825491|text|通常，表数据可以将表行拉伸到不需要的长度，超出表行的范围。在处理移动设备时，您将有有限的px。您可以创建现有CSS样式表的副本，并对其进行稍微编辑，为站点切换到mobile时设置表的最小/最大宽度。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|825492|max-width:+__px;++
min-width:+__px;+
etc.|code-block|syntax|javascript|825493|或者，您可以在切换到移动站点时调用JS函数，并附加CSS。|825494|$('#tableName').css('max-width',+'150px');
$('#tableName').append(div).css('max-width',+'150px');|825495|JS版本可能有点棘手，我认为您应该对CSS设置限制。|825496|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

In general, table data can stretch tables rows to an undesired length, going out of bounds of the table row. When dealing with mobile devices you will have limited px. You could either create a copy of your existing CSS Stylesheet and edit it slightly setting a min/max width for the table for when your site switched to mobile. 

<pre><code>max-width: __px; 
min-width: __px; 
etc.
</code></pre>

Or you could call a JS function on the event of the switch to mobile site appending the CSS 

<pre><code>$('#tableName').css('max-width', '150px');
$('#tableName').append(div).css('max-width', '150px');
</code></pre>

The JS version can be a little tricky to get going, I think that you should go with setting limits on the CSS.

blocks|key|825517|text|我可以建议媒体查询是响应性设计的最佳解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|825518|让我根据页面宽度给你一个简单的响应代码。|825519|在这里，在代码中，我使用媒体查询来根据浏览器的宽度更改段颜色。您可以使用style=display:none隐藏内容，或者根据浏览器宽度更改内容的大小。|825520|<html>
<head>
<style>
@media+(max-width:+600px)+{
+++#p1{
+++color:red;
+++}
}
@media+(max-width:+400px)+{
+++#p1{
+++color:blue;
+++}
}
</style>

</head>
<body>
<p+id="p1"+media="(max-width:+800px)">Hi+,+This+text+colour+change+according+to+browser+size.

</body>
</html>|code-block|syntax|javascript|825521|您可以找到更多的教程--简单地说是这里|offset|length|825522|entityMap|0|LINK|mutability|MUTABLE|url|http://css-tricks.com/css-media-queries/^0|0|0|0|0|H|2|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|Z|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|10|8|@]|9|@$M|11|N|12|1|13]]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

Media queries i can suggest is the best solution for responsive design.

Let me give you a simple code for responsivenes based on page width.

Here in the code i have using the media queries for changing the para color based on the browser width. You can instead hide using style=display:none or change the size of the contents based on the browser width.

<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;style&gt;
@media (max-width: 600px) {
 #p1{
 color:red;
 }
}
@media (max-width: 400px) {
 #p1{
 color:blue;
 }
}
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;p id="p1" media="(max-width: 800px)"&gt;Hi , This text colour change according to browser size.&lt;/p&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>

you can find more tutorial simply <a href="http://css-tricks.com/css-media-queries/" rel="nofollow">here</a>

I am trying to display a list of data in table on the desktop version of the website using tables. I want to condense the same for the mobile web. Should I use a separate block of html or can I convert the present tables for the mobile view.

<a href="http://play.mink7.com/h/startupsradar/pending.html" rel="nofollow noreferrer">http://play.mink7.com/h/startupsradar/pending.html</a>

I like the following list view on mobile

<img src="https://i.stack.imgur.com/cM07J.jpg" alt="enter image description here">

Update
I modified the code according to the answers. Any idea how i can make the whole list as a whole as click-able as one block ?

Responsive Design to display List of Data

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我试图用表格在桌面版的网站上显示表格中的数据列表。我想对移动网络进行同样的压缩。是使用单独的html块，还是可以将当前表转换为移动视图。我喜欢下面的移动列表视图​​Update I根据答案修改了代码。你知道我怎么才能把整个列表作为一个可点击的块吗？

问数据显示表的响应设计
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问数据显示表的响应设计EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问数据显示表的响应设计
EN