其他列为动态时如何设置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>

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

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

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