当其他列是动态的时，如何设置colspan elents宽度

Question

我有一张桌子： -

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

这里第二部分是动态的，即，对于那4列，可以有两个以上和第二个重复。

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

Answer 1

如果添加其他列，您的“名称”(<th colspan="4">Total</th><th colspan="4">Total</th>)解决方案的colspan="2"将起作用。

要做这个改变

<th>

至

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