jquery - 如何按内容拉伸(stretch)表格的一列并相应地减少其他列的宽度？

Question

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

随着第二列的拉伸(stretch)，所有其他列之间的宽度以相同的方式减小。完美的是，第二列的最大宽度会有一定的限制(例如一般表格宽度的 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;”的各种组合等等，但似乎没有什么能像我希望的那样工作。

Answer 1

您可以在其他 td 上设置最小宽度以使第二个 td 响应:

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/