html - 有很多列时无法固定列宽

Question

当有很多列时，我无法固定列宽。 当用户单击 + 以查看其他数据时，Product Type 列因宽度而看起来不太好。

我尝试添加类似 style="width:300px;" 的内容，但它不起作用

请检查代码跟随链接 https://jsfiddle.net/chanthida/vfLzt4mw/1/

谢谢。

Answer 1

尝试使用 min-width: 300px; 而不是 width: 300px;。

显示以下片段。

$(".click-collapse").on('click', function() {
    $(this).find('i').text(function(_, value){return value=='-'?'+':'-'});
    $(this).nextUntil('tr.click-collapse').slideToggle(100);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div style="overflow-x: auto;white-space: nowrap;">
    <table border="1">
        <tr>
            <th>Room Type</th>
            <th style="min-width:300px;">Product Type</th>
            <th>2019-11-14</th>
            <th>2019-11-15</th>
            <th>2019-11-16</th>
            <th>2019-11-17</th>
            <th>2019-11-18</th>
            <th>2019-11-19</th>
            <th>2019-11-20</th>
            <th>2019-11-21</th>
            <th>2019-11-22</th>
            <th>2019-11-23</th>
            <th>2019-11-24</th>
            <th>2019-11-25</th>
            <th>2019-11-26</th>
            <th>2019-11-27</th>
            <th>2019-11-28</th>
            <th>2019-11-29</th>
            <th>2019-11-30</th>
            <th>2019-12-01</th>
            <th>2019-12-02</th>
            <th>2019-12-03</th>
        </tr>
        <tr>
            <td>Superior </td>
            <td> RB - NRF </td>
            <td>1650</td>
            <td>1650</td>
            <td>1650</td>
            <td>1650</td>
            <td>1650</td>
            <td>1650</td>
            <td>1650</td>
            <td>1650</td>
             <td>1650</td>
            <td>1650</td>
            <td>1650</td>
            <td>1650</td>
            <td>1650</td>
            <td>1650</td>
            <td>1650</td>
            <td>1650</td>
            <td>1650</td>
            <td>1650</td>
            <td>1650</td>
            <td>1650</td>
           
        </tr>
        <tr class="click-collapse">
        <td> <a style="cursor: pointer;"> Click me <i>-</i> </a></td>
            <td colspan="21"></td>            
        </tr>
        <tr>
            <td></td>
            <td>
               test test test test test test test 
            </td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
        </tr>
        <tr>
            <td></td>
            <td>
              test 2
            </td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
        </tr>
        <tr class="click-collapse"></tr>
    </table>
</div>

我希望这对你来说是完美的。

谢谢。