Question

如果我有这两个表：

<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也是桌面上的一个选项，如果有一种方法可以使用它来解决它。

Answer 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%; }

Answer 2

我会在'flow'列上使用基于百分比的宽度，并在必要时使用固定宽度的列缓冲它。即：

<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>

Answer 3

您可以使用CSS来完成此任务。你必须有更长的内容包装。

td{
   width:80%;
}

Answer 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元素的名称，并在其他地方定义样式，如外部文件或标题样式

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

4 个答案: