如何解决如何在换行中显示描述性列,但如何在具有CSS的表之间隐藏它?
是否可能通过仅使用html和css来显示数据的描述性列(如果它是最左边的表),而不显示它(如果它在另一个表的右边)?
类似这样的东西:
table {
margin: 10px 0 10px 0;
float: left;
border-collapse: collapse;
}
td {
border: 1px solid black;
}
<table>
<tr>
<td class="description">
Descriptive Row 1 of Table 1
</td>
<td class="data">
Content Row 1 of Table 1
</td>
</tr>
<tr>
<td class="description">
Descriptive Row 2 of Table 1
</td>
<td class="data">
Content Row 2 of Table 1
</td>
</tr>
<tr>
<td class="description">
Descriptive Row n of Table 1
</td>
<td class="data">
Content Row n of Table 1
</td>
</tr>
</table>
<table>
<tr>
<td class="description">
Descriptive Row 1 of Table 2
</td>
<td class="data">
Content Row 1 of Table 2
</td>
</tr>
<tr>
<td class="description">
Descriptive Row 2 of Table 2
</td>
<td class="data">
Content Row 2 of Table 2
</td>
</tr>
<tr>
<td class="description">
Descriptive Row n of Table 2
</td>
<td class="data">
Content Row n of Table 2
</td>
</tr>
</table>
<table>
<tr>
<td class="description">
Descriptive Row 1 of Table 3
</td>
<td class="data">
Content Row 1 of Table 3
</td>
</tr>
<tr>
<td class="description">
Descriptive Row 2 of Table 3
</td>
<td class="data">
Content Row 2 of Table 3
</td>
</tr>
<tr>
<td class="description">
Descriptive Row n of Table 3
</td>
<td class="data">
Content Row n of Table 3
</td>
</tr>
</table>
显示如下:
+------------------------------+--------------------------++--------------------------+
| Descriptive Row 1 of Table 1 | Content Row 1 of Table 1 || Content Row 1 of Table 2 |
+------------------------------+--------------------------++--------------------------+
| Descriptive Row 2 of Table 1 | Content Row 2 of Table 1 || Content Row 2 of Table 2 |
+------------------------------+--------------------------++--------------------------+
| Descriptive Row n of Table 1 | Content Row n of Table 1 || Content Row n of Table 2 |
+------------------------------+--------------------------++--------------------------+
+------------------------------+--------------------------+
| Descriptive Row 1 of Table 3 | Content Row 1 of Table 3 |
+------------------------------+--------------------------+
| Descriptive Row 2 of Table 3 | Content Row 2 of Table 3 |
+------------------------------+--------------------------+
| Descriptive Row n of Table 3 | Content Row n of Table 3 |
+------------------------------+--------------------------+
我想将此用于具有不同屏幕尺寸的设备的灵活布局。对表使用float:left可以将它们包裹起来,但是我还没有找到隐藏表之间描述性列的方法。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。