使2个表具有相同的列大小

Question

我有2个HTML表,它们直接相互叠加.每个表具有相同的列数,但它们包含的文本可能不同.每个表可以包含很多行.我希望这两个表具有完全相同的列宽,以便列始终排列.我不介意列中的文本是否包含必要的内容.由于其他原因,我无法将所有行合并到一个表中.

有没有办法让这种情况发生？

请注意,此解决方案只能在Firefox和IE的最后两个版本中使用.

Answer 1

我建议在列上使用百分比宽度,确保这些宽度总是加起来为100%.

<style type="text/css">
  table { width: 100%; }
  td.colA { width: 30%; }
  td.colB { width: 70%; }
</style>

<table>
  <tr>
   <td class="colA">Lorem ipsum</td>
   <td class="colB">Lorem ipsum</td>
  </tr>
</table>

<table>
  <tr>
   <td class="colA">Lorem ipsum</td>
   <td class="colB">Lorem ipsum</td>
  </tr>
</table>

Answer 2

据我所知，您无法对齐两个表的列。

您可以创建一张表并使用 css 使其看起来像两张表。

<table>
  <tr> <!-- First table header --> </tr>
  <tr> <!-- First table rows... --></tr>
  <tr> <!-- First table footer... --></tr>
  <tr> <!-- Empty space between tables --> </tr>
  <tr> <!-- Second table header --> </tr>
  <tr> <!-- Second table rows... --></tr>
  <tr> <!-- Second table footer... --></tr>
</table>