javascript - 设置 <td> 宽度所需的 HTML/Javascript 技巧

Question

我有以下问题:

我必须在网页上列出几个元素，每个元素都有几个属性。 list 是在两个 HTML 表格中完成的。一张表用于标题，一张表用于元素。这种分离是为了有可能只滚动列表。 (在标题部分有一个滚动条会很奇怪)。据我所知，只有一种方法可以在 HTML 列表中滚动，即 div overflow 属性。

问题是我需要在整个列表中设置列(元素)的宽度，即在标题和元素列表中。这是现在如何完成的简化示例:

<table width="98%">
    <tr> 
        <td>1</td> <td>2</td> <td>3</td> <td>4</td>
    </tr>
    <div style="width: 100%; height: 300px; overflow-y:scroll">
        <table>
            <tr> 
                <td>123456789101112</td> <td>2</td> <td>3</td> <td>4</td>
            </tr>
        </table>
    </div>
</table>

问题在于，由于列表中的元素可能有很长(我的意思是很多字符)的值，即使使用了宽度属性，浏览器也会扩展单元格。由于标题位于单独的列中，因此其列的长度将与 div 的列不同。

到目前为止，我已经尝试让浏览器呈现列表中的列，然后获取这些计算样式并将它们应用于标题的列，但标题列似乎没有得到准确的宽度。我在元素的其他地方遇到过同样的问题，但由于文本宽度是恒定的，所以我使用像素作为宽度，在 FF 和 IE8 中使用不同的长度，但现在的问题是 - 我认为 - 更复杂。

如何使两个表中的列具有相同的宽度？

Answer 1

您的示例是无效的 HTML。我根本不建议使用这种方式。

使所有列具有相同宽度(无需 JavaScript 的帮助)的唯一方法实际上是将它们放在同一个表格中。

查看 this question .我没有对它们进行测试，但有些答案看起来像是只使用一个使用 thead 和 tbody 元素的表元素就可以提供您需要的功能。