如何按内容拉伸表格的一列并相应地减小其他列的宽度？

Posted 2023-03-05

【中文标题】如何按内容拉伸表格的一列并相应地减小其他列的宽度？

【英文标题】：How to stretch one column of a table by content and decrease widths of others accordingly?

【发布时间】：2015-11-02 04:09:55

【问题描述】：

我有一个根据用户上传的数据动态创建的简单 html 表。它被包裹在一个带有“col-sm-5”类的 div 中（也被包裹在“row”div 中）。我需要的是表格保持相同的大小，但它的第二列根据其内容拉伸（更改宽度）。

随着第二列的延伸，所有其他列的宽度都以相同的方式相互减小。完美地，第二列的最大宽度会有一定的限制（例如，一般表格宽度的 60%）。这是我正在使用的表的示例：

<table class="table table-condensed catalog-table dataTable no-footer" cellspacing="0" rules="all" border="1" style="border-collapse:collapse;">
        <tr>
            <td>1</td><td>1</td><td>ssssssssssssssss</td><td>3</td>
        </tr><tr>
            <td>1</td><td>675493859480938590374269824930862436</td><td>67549385</td><td>67549385</td>
        </tr><tr>
            <td>1</td><td>6.055555555555555555555555555555555555</td><td>56.45</td><td>xyz</td>
        </tr><tr>
            <td>1</td><td>t</td><td>0</td><td>1</td>
        </tr>
</table>

我已尝试应用设置“max-width”、“width”、“white-space:nowrap;”等的各种组合，但似乎没有任何效果。

【参考方案1】：

一般而言，避免重叠的解决方法是将类 .table-responsive 添加到表中。

但是，如果您根本不喜欢溢出解决方案，我建议您使用 div 模仿您的表格或在表格中设置一个类并提供表格和表格元素（tr、td 等）display: block 或 @987654323 @ . 然后您将能够使用您喜欢应用的max-width 规则。

在您找到适合您需要的正确配方之前，您的桌子会有些混乱。

希望对你有所帮助。

【参考方案2】：

您可以在其他 td 上使用 min-width 以使第二个响应：

HTML

<table class="table table-condensed catalog-table dataTable no-footer" cellspacing="0" rules="all" border="1" style="border-collapse:collapse; width:100%">
        <thead>
            <tr>
                <th style="min-width:100px">1</th>
                <th >2</th>
                <th style="min-width:100px">3</th>
                <th style="min-width:100px">4</th>
            </tr>       
        </thead>    
        <tr>
            <td>1</td>
            <td>1</td>
            <td>ssssssssssssssss</td>
            <td >3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>675493859480938590374269824930862436</td>
            <td>67549385</td>
            <td>67549385</td>
        </tr>
        <tr>
            <td>1</td>
               <td>6.055555555555555555555555555555555555</td>
            <td>56.45</td>
            <td>xyz</td>
        </tr><tr>
            <td>1</td>
            <td>t</td>
            <td>0</td>
            <td>1</td>
        </tr>
</table>

http://jsfiddle.net/63sg85Lr/