Question

我正在使用谷歌浏览器呈现此HTML页面：

<html>
<style>
    table {
        width: 100%;
    }
    table, td, th {
        border: 1px solid black;
        text-align: left;
    }
    td {
        vertical-align: top;
    }
</style>
<body>
    <table>
        <tr>
            <th>Name</th>
            <th>Value</th>
        </tr>
        <tr>
            <td>Bobby</td>
            <td>100</td>
        </tr>
    </table>
</body>
</html>

以上代码工作正常。问题是，我希望第一列不会在该列中托管的任何行中调整其宽度超过最长内容宽度的宽度。例如，当我调整窗口大小时，我得到了这个：

*---------------------------*---------------------------*
|Name                       |Value                      |
*---------------------------*---------------------------*
|Bobby                      |100                        |
*---------------------------*---------------------------*

但我希望它是这样的：

*-----*-------------------------------------------------*
|Name |Value                                            |
*-----*-------------------------------------------------*
|Bobby|100                                              |
*-----*-------------------------------------------------*

如何做到这一点？

PS：我仍然希望保留整个表格占据窗口宽度100％的方式。

Answer 1

只需将:first-child的宽度设置为1px，它应根据内容更新宽度。

table th:first-child,
table td:first-child {
    width: 1px;
}

http://jsfiddle.net/sbeliv01/ehpvrzk0/

Answer 2

可以尝试修补基于百分比的宽度以遵守表格的宽度

    tr th, 
    tr td {
        width: 90%;
        /* adjust this if the "label" column needs to be longer */
    }
    tr th:first-child,    
    tr td:first-child {
        width: auto;
    }

http://jsfiddle.net/25pjqva4/

Answer 3

只需添加到您的第一个子列width:auto属性。

table tr td:first-child {
    width:auto;
}

将表列的宽度设置为最大值，使其位于其下方行的内容宽度

3 个答案: