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

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

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

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

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

td{ 
    width:80%; 
} 

Answer 3

你能为这个动态内容定义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 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元素并在其他地方定义样式，如外部文件或标题样式