固定表格布局和固定列宽度+colspan的样式设置

Question

我有以下布局。

<style>
   table { width: 200px; white-space: nowrap; table-layout: fixed; }
   .a { width:10px; overflow: hidden; text-overflow: ellipsis }
   .b { width:190px; overflow: hidden; text-overflow: ellipsis }
</style>

<table border="1" style="">
    <tr>         
        <td colspan="2">Some content header goes in here</td>
    </tr>
    <tr>
        <td class="a">This cells has more content</td>
        <td class="b">Less content here</td>
    </tr>
</table>

我想设置一个固定的表格布局，并且每列都有固定的宽度，但是由于我在固定列上方使用了 colspan，所以我无法设置宽度。我该如何实现这一点？

- Kayla

Answer 1

你可以在开头的<table>标签后面添加几个col标签，并在这些标签上设置宽度：

<style>
   table { width: 200px; white-space: nowrap; table-layout: fixed; }
   .a { overflow: hidden; text-overflow: ellipsis }
   .b { overflow: hidden; text-overflow: ellipsis }
   .cola { width: 10px; }
   .colb { width: 190px; }
</style>

<table border="1" style="">
    <col class="cola" />
    <col class="colb" />
    <tr>         
        <td colspan="2">Some content header goes in here</td>
    </tr>
    <tr>
        <td class="a">This cells has more content</td>
        <td class="b">Less content here</td>
    </tr>
</table>

- Jonathan S.

---

取决于你的 DOCTYPE。这是完全有效的 HTML5，这是我现在追求的目标。 - Jonathan S.

有没有更少的HTML标记的方法来实现这个？我正试图在现有网站中实现它，所以回头修改数百个页面并插入<col>标记可能会引发问题。 - Eric K

我不知道有没有这样的方法，但如果你找到了，请随意分享。 - Jonathan S.

PS列在html4中已被弃用，在html5中已经过时。 - Achshar

<col>和<colgroup>在HTML4和HTML5中仍然有效，但是<col>上的许多属性（例如<col align="">）在HTML4中已被弃用，并在HTML5中变得过时。尽管如此，上述语法在HTML4和HTML5中都是有效的。请参见MDN，HTML5规范，HTML 4.01规范。 - Jonathan S.