我有一个使用常量联系创建的html表，我想让它响应并适合容纳它的容器div。
以下是demo
我尝试了以下但是这不起作用
<table border="0" width="100%" cellspacing="0" cellpadding="0">
答案 0 :(得分：5)
表格在响应和保持布局方面并不是很好 - 因此最好在较小的屏幕上覆盖它们的样式，例如：
http://jsfiddle.net/wildandjam/E32Cq/
@media all and (max-width:768px){
table,tr, td, tbody, td p table div, table table{
width:100%!important;
float:left;
clear:both;
display:block;
text-align:center;
}
table img {
max-width:100%;
height:auto;
}
}
答案 1 :(得分：0)
如果你不使用那些没有设计用于完成这项工作的html元素，那将会容易得多。表用于呈现数据，而不是用于保持布局。
如果你真的需要使用表格，你必须隐藏和显示带有媒体查询的行，这是一个非常糟糕的做法。
如果你决定使用div，你可以浮动它们在媒体查询中设置不同的宽度取决于屏幕尺寸。
答案 2 :(得分：0)
纯粹的css方式使表格完全响应，不需要JavaScript。在这里查看演示Responsive Tables 这是css
<style>
.tablewrapper{width: 95%; overflow-y: hidden; overflow-x: auto;
background-color:green; height: auto; padding: 5px;}
</style>
这是HTML部分
<div class="tablewrapper">
<table class="responsive" width="98%" cellpadding="4" cellspacing="1" border="1">
<tr>
<td>Name</td>
<td>Email</td>
<td>Phone</td>
<td>Address</td>
<td>Contact</td>
<td>Mobile</td>
<td>Office</td>
<td>Home</td>
<td>Residency</td>
<td>Height</td>
<td>Weight</td>
<td>Color</td>
<td>Desease</td>
<td>Extra</td>
<td>DOB</td>
<td>Nick Name</td>
</tr>
</table>
</div>
另外，如果您不想在表格周围手动添加tableWrapper div，则可以使用jquery在页面加载时添加tablerapper。只需使用
$().ready(function(e){
$(document).find("table.responsive").each(function(e){
$(this).wrap("<div class="tablewrapper"></div>")
})
})
答案 3 :(得分：0)
我一直在寻找你的案子，我有两个答案。 第一个是问题的答案＆＃34; ¿how to make your html table responsive?＆＃34; （注意：西班牙文章，例如，您可能需要使用chrome页面翻译器）
第二个是＆＃34;你应该考虑更多的语义标记＆＃34; （无表格）该内容。不应使用<table>，而应使用<ul><li>，如下所示：
<ul class="itemList">
<li class="item">
<img src="" alt="" />
<p>From</p>
<p class="price">25€<span>per person sharing</span></p>
</li>
</ul>
然后使用外部CSS来应用样式：
.itemList {width: 100%} /*probably not necessary*/
.item {display:inline-block; width: 33%; max-width: /*here your desired max width*/}
.price span {display: inline-block} /*no cells, no floats = no problems*/
最后，您可以使用@media查询来创建CSS断点：
@media only screen and (max-width: 480px) {
.item {display:inline-block; width: auto; max-width:100%;}/*just as an example*/
}
如果您有任何其他问题，请告诉我
答案 4 :(得分：0)
我尝试在没有任何其他依赖库的情况下创建一个lite rwd表扩展（例如：jQuery）： https://github.com/sean1093/html-rwd-table
您可以简单地使用如下：
<div id="myTable"></div>
var myTable = new rwdTableExtend("myTable");
myTable.initTable();
答案 5 :(得分：0)
我有一个适用于很多表实现的解决方案，因为您正在很好地格式化表（table>thead>tr>th^^tbody>tr>td）。找到我的CodePen here。根据表格中的数据，这可能是一个很好的动员解决方案。
此解决方案假设您已经很好地构建了表，这意味着您将thead与th和tbody与td一起使用。例如：
<table>
<thead>
<tr>
<th>A</th>
<th>S</th>
<th>L</th>
</tr>
</thead>
<tbody>
<tr>
<td>33</td>
<td>M</td>
<td>United States</td>
</tr>
</tbody>
</table>
鉴于表数据没有以数值的列和列为特征，这个JS / CSS解决方案运行良好。您可以在我的雇主的文档页面（SmartyStreets Documentation）上以及我为其构建的CodePen片段（{3}}上以人类可读的形式查看它。要使其正常工作，请调整屏幕大小。每个实现的断点设置不同，因为一致性。以下是如何实现它。
表格被送到tableMobilizer函数。鉴于它是基于jQuery构建的，这可以对页面上的所有表进行，如下所示：
var tables = $(table);
tableMobilizer(tables);
如果你需要，你绝对可以更有选择性地使用选择器调动表格。
这将为传入的每个表生成一组新表，并将它们附加到各自的源表之后。每个新表都包含一行源表，该表通过90度逆时针旋转并与表标题配对。
旧表格被动态归类为.hidden-small-down，新表格被归类为.hidden-medium-up，用于CSS媒体查询。
新表归类为.mobile-tables（对于由单个源表生成的所有移动表的集合），.mobile-table（对于单个源表行的每个移动表表示），{{ 1}}（对于移动表格中的一行），.mobile-table-row（对于移动表格的第一列）和.mobile-table-key（对于移动表格的第二列）。
在CSS中，设置媒体查询以隐藏/显示相应的表格视图：
.mobile-table-value在实施媒体查询后，您可以自行决定是否对表格进行样式设置。
这不是一个银弹解决方案。使用表格数据的可视化可能非常复杂。如上所述，这种解决方案对于大量繁重的表来说并不是很好。它也不处理col和row spanning。与往常一样，认真考虑您是否确实需要在布局中使用表格（超出本评论的范围）。如果你这样做，这可能是动员你的牌桌的好方法。
答案 6 :(得分：0)
您可以使用bootstrap使表格响应。 将类定义为响应表，以使表成为响应式。
<div class="table-responsive">
<table class="table">
...
</table>
</div>
答案 7 :(得分：0)
使用媒体查询和容器的宽度，字体大小应为百分比。
答案 8 :(得分：-1)
这里的问题实际上是你的桌子。正如您所看到的，其中一个底部表格具有明确的宽度设置，这会迫使表格的其余部分效仿：
<table id="content_LETTER.BLOCK1" style="height: 21px;" border="0" width="798" cellspacing="0" cellpadding="0">
注意width="798"。这将默认为像素。摆脱任何明确定义的宽度，表格应该更接近响应。
然而，正如其他人所说的那样 - 响应表很棘手。特别是那些包含许多其他嵌套表的表（如在您的示例中）。您还需要解决这些表中任何图像的响应性，因为这些可能会强制表格大于它需要的大小。我会在这里重新访问您的整个布局，并尝试在整个页面中使用更具响应性的元素。
<强>更新
请注意，@ wildandjam的回答“有效”的原因主要是因为他覆盖了所有表格元素的设置宽度。这是一个快速解决方案，但在我看来，它并没有弥合理解的差距。