HTML示例

Question

所以我有两张html桌子每个表有两列我希望下表中的每列完全位于上一列

中的类似列下的问题

|表1 | | ---- | ----- | | ---- | ----- |

|表2 | | ---- | ----- | | ---- | ----- |

编辑：

我尝试使用

<td valign="top"></td>

但是我不认为这是正确的代码

Answer 1

试试这个，对两个表使用相同的td类。

HTML示例

<table id="table1">
    <tr><td class="first">aaa</td><td class="second">aaa</td></tr>
    <tr><td class="first">aaa</td><td class="second">aaa</td></tr>
    <tr><td class="first">aaa</td><td class="second">aaa</td></tr>
</table>
<br /><br />
<table id="table2">
    <tr><td class="first">aaa</td><td class="second">aaa</td></tr>
    <tr><td class="first">aaa</td><td class="second">aaa</td></tr>
    <tr><td class="first">aaa</td><td class="second">aaa</td></tr>
</table>

CSS

#table1, #table2 {float:left;width:700px;}

td.first{ width:40%;}

td.second{ width:60%;}

Answer 2

如果向表中添加一个类，则应该能够删除边距和填充

table {
    margin: 0;
    padding: 0; 
}

如果您需要它们精确对齐，请指定每个字段的宽度

td {
    width: 10%; 
}

Answer 3

您可以为表格的列设置相同的宽度。

但是，您设置的宽度基本上只是建议，并且可能会因内容要求而被浏览器覆盖。在两个表上使用CSS中的table-layout: fixed通常会修复此问题，但它可能会产生令人讨厌的副作用（例如，内容不会被截断）。无论如何，您必须对列宽进行一些猜测，而不是让浏览器动态计算它们。

最好的方法可能是将两个表合并为一个表。

Answer 4

试试“yeyene ..

给出的例子

你可以做以下事情; 使用CSS表..然后可以轻松地解决这个问题。

csstables

两个HTML表彼此之下

4 个答案:

HTML示例

CSS