Question

我已经创建了一个类似于2d结构的html表。我希望使该表具有响应性。我已经尝试了一些方法。列响应方法不适合我的表，因为它变得难以理解表数据。其他任何建议??

我的示例表结构与此类似

＆＃13;

<table class="indoor-table" style="width: 100%; border-collapse: collapse; border: 1px solid #e67817;">
<thead>
<tr>
<th style="border: 1px solid #e67817; text-align: center;">pixel pitch</th>
<th style="width: 11.5%; border: 1px solid #e67817; text-align: center;" align="center">3</th>
<th style="width: 11.5%; border: 1px solid #e67817; text-align: center;" align="center">4</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 20%; border: 1px solid #e67817;">Module Resolution (W*H Pixel)</td>
<td style="width: 11.5%; border: 1px solid #e67817;" align="center">192*192</td>
<td style="width: 11.5%; border: 1px solid #e67817;" align="center">128*128</td>
<td style="width: 11.5%; border: 1px solid #e67817;" align="center">160*160</td>
</tr>
<tr>
<td style="width: 11.5%; border: 1px solid #e67817;" align="center">160*160</td>
<td style="width: 11.5%; border: 1px solid #e67817;" align="center">192*96</td>
<td style="width: 11.5%; border: 1px solid #e67817;" colspan="2" align="center">32*16</td>
<td style="width: 11.5%; border: 1px solid #e67817;" align="center">16*16</td>
</tr>
</tbody>
</table>

＆＃13;

由于colspan，一些响应方法无法正常工作，我不想使用水平滚动方法。所以建议我选择适合我的表。

Answer 1

我会看一下这篇博文，它给你一些可以使用的想法和插件：

http://exisweb.net/responsive-table-plugins-and-patterns

没有可接受的方法来执行响应表。如果数据太多或者表中的数据包含很多字符，则非常困难。

很多人都在使用自适应方法，其中表格视图与移动设备完全不同。

如果没有看到您的表格，很难向您提出合适的解决方案，但我认为您应该能够在该博客文章中找到符合您需求的内容。

如何使我的HTML表响应

1 个答案: