有没有办法在 html 表中同步列宽？答案

【问题标题】：Is there a way to sync column widths in an html table?有没有办法在 html 表中同步列宽？
【发布时间】：2009-11-10 00:45:36
【问题描述】：

如果我有这两张表：

<table>
    <tr>
        <td>Small Length Content</td>
    </tr>
</table>

<table>
    <tr>
        <td>Dynamic Content Goes Here And It's Longer Than The TD Above</td>
    </tr>
</table>

我怎样才能使两列具有相同的宽度？

我无法合并表格，所以这不是一个选项。由于其动态内容，我也不能使用固定宽度。有任何想法吗？也许javascript中的某些东西使顶部列与下部表格的宽度相匹配？我不是 js 专家，所以我不知道这是否可能或如何去做。如果有办法使用它来解决它，Php 也是一个选项。

【问题讨论】：

标签： php javascript html

【解决方案1】：

您可以为这个动态内容定义 CSS 吗？假设这些表嵌套在一个 div 中，如下所示：

<div id="content">
  <table>
    <tr>
      <td>Small Length Content</td>
    </tr>
  </table>

  <table>
    <tr>
    <td>Dynamic Content Goes Here And It's Longer Than The TD Above</td>
    </tr>
  </table>
</div>

我会写一些这样的css：

#content table td { width: 80%; }

【讨论】：

【解决方案2】：

我会在“流动”列上使用基于百分比的宽度，并在必要时使用固定宽度的列对其进行缓冲。即：

<table style="width: 100%;">
    <tr>
        <td style="width: 80%;">Small Length Content</td>
    </tr>
</table>

<table style="width: 100%;">
    <tr>
        <td style="width: 80%;">Dynamic Content Goes Here And It's Longer Than The TD Above&lt;/td>
    </tr>
</table>

【讨论】：

【解决方案3】：

您可以使用 CSS 来完成此操作。您将不得不有更长的内容包装。

td{
   width:80%;
}

【讨论】：

【解决方案4】：

试试

<table>
<tr>
    <td style="width:200px">Small Length Content</td>
</tr>
</table>

<table>
<tr>
    <td>Dynamic Content Goes Here And It's Longer Than The TD Above</td>
</tr>
</table>

或添加一个类来命名td 元素并在其他地方定义样式，如外部文件或标题样式

【讨论】：