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，所以我无法设置宽度。我怎样才能做到这一点？

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>

样式表格布局固定＆amp;固定宽度列+ colspan

1 个答案: