当其他列是动态的时如何设置colspan元素宽度答案

【问题标题】：How to set colspan elents width when other columns are dynamic当其他列是动态的时如何设置colspan元素宽度
【发布时间】：2019-02-23 09:53:04
【问题描述】：

我有一张桌子：-

  <table >
        <thead style="width: calc(100% - 15px); display: table; table-layout: fixed;">
            <tr>
                <th colspan="3"></th>
                <th colspan="4">Total</th>
                <th colspan="4">Total</th>
            </tr>
            <tr>
                <th>Name</th>
                <th>Type</th>
                <th>Total</th>
                <th>Size</th>
                <th>Min</th>
                <th>Max</th>
                <th>Price</th>
                <th>Size</th>
                <th>Min</th>
                <th>Max</th>
                <th>Price</th>
            </tr>
        </thead>
        <tbody style="display: block; max-height: 450px; overflow-y: scroll;">
            <tr style="display: table; table-layout: fixed; width: 100%; height: 1px;">
                <td>
                    <div>3726</div>
                </td>
                <td>
                    <div>20</div>
                </td>
                <td>
                    <div>20</div>
                </td>
                <td>
                    <div></div>
                </td>
                <td>
                    <div></div>
                </td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr style="display: table; table-layout: fixed; width: 100%; height: 1px;">
                <td>
                    <div>3726</div>
                </td>
                <td>
                    <div>20</div>
                </td>
                <td>
                    <div>20</div>
                </td>
                <td>
                    <div></div>
                </td>
                <td>
                    <div></div>
                </td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr style="display: table; table-layout: fixed; width: 100%; height: 1px;">
                <td>
                    <div>3726</div>
                </td>
                <td>
                    <div>20</div>
                </td>
                <td>
                    <div>20</div>
                </td>
                <td>
                    <div></div>
                </td>
                <td>
                    <div></div>
                </td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>

这里的第两个部分(<th colspan="4">Total</th><th colspan="4">Total</th>)是动态的，即，可能有两个以上，第 4 列重复。

现在，我想要的是子标题部分中的第一列“名称”更宽，而不会干扰其他列。但是，由于 colspan 我无法提供宽度， colspan="2" 也不起作用。我也无法对表格布局进行任何更改。有什么办法可以实现这一目标吗？

【问题讨论】：

标签： css html

【解决方案1】：

如果您添加额外的列，您的 colspan="2"“名称”<th> 解决方案将起作用。

要进行此更改

<tr>
  <th colspan="3"></th>
  <th colspan="4">Total</th>
  <th colspan="4">Total</th>
</tr>

到

<tr>
  <th colspan="4"></th>
  <th colspan="4">Total</th>
  <th colspan="4">Total</th>
</tr>

【讨论】：