使2个表具有相同的列大小 [英] Make 2 tables have the same column sizes

问题描述

我有2个HTML表格，直接在彼此的顶部。每个表都有相同的列数，但是它们包含的文本可能不同。并且每个表可以包含许多行。我希望这两个表具有完全相同的列宽，以便列总是排列。我不介意，如果列中的文本包装尽可能多的必要。由于其他原因，我不能将所有的行组合成一个表。

I have 2 HTML tables that are directly on top of each other. Each table has the same number of columns, but the text they contain can differ. And each table can contain many rows. I would like for these 2 tables to have the exact same column width so that the columns always line up. I don't mind if the text within the columns wraps as much as necessary. And I cannot combine all the rows into a single table for other reasons.

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

Is there some way to make this happen?

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

Note that this solution only has to work in Firefox and the last 2 versions of IE.

推荐答案

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

I suggest using percentage widths on your columns, making sure that those widths always add up to 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>

这篇关于使2个表具有相同的列大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！