Question

当列很多时，我不能固定列宽。当用户单击+以查看其他数据时，由于宽度，“产品类型”列将看起来不佳。

我尝试添加类似BACKUP DATABASE [MYDB] TO DISK = N'C:\Dummy.bak' WITH RETAINDAYS = 3;的内容，但是它不起作用

请检查代码，点击链接 https://jsfiddle.net/chanthida/vfLzt4mw/1/

谢谢。

Answer 1

您应该尝试：

width: 15%;

如果列中的文本太长，则可以使用函数sub string 或者您尝试删除样式第一格中的white-space: nowrap;。

Answer 2

尝试使用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>

我希望这对您来说完美。

谢谢。

Answer 3

您可以使用appengine-web-app xmlns="http://appengine.google.com/ns/1.0"> <application>simple-app</application> <module>default</module> <version>uno</version> <threadsafe>true</threadsafe> <instance-class>B8</instance-class> <basic-scaling> <max-instances>11</max-instances> <idle-timeout>10m</idle-timeout> </basic-scaling>存档此设计让我知道进一步的澄清

希望这对您有用。：）

box-sizing: border-box; min-width: 300px;

table td {
    box-sizing: border-box;
    min-width: 300px;
}

多列时无法固定列宽

3 个答案: