Question

我有一张可能有两列，三列或四列的表格。这些列的内容是动态的。

我想要做的是让第一列尽可能多地使用宽度。其余列应仅使用显示文本而不包装所需的内容。

我用几张桌子创造了这个js小提琴。你可以看到年龄和国家的宽度均匀。 http://jsfiddle.net/7wt7d/

HTML

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Frank</td>
        <td>26</td>
    </tr>
    <tr>
        <td>Marry</td>
        <td>31</td>
    </tr>
</table>

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Country</td>
    </tr>
    <tr>
        <td>Frank</td>
        <td>26</td>
        <td>United States</td>
    </tr>
    <tr>
        <td>Marry</td>
        <td>31</td>
        <td>Canada</td>
    </tr>
</table>

CSS

table {
    width: 400px;
}
th, td {
    text-align: right;
}

th:first-child, td:first-child {
    text-align:left;
}

我已尝试在列上设置宽度，但由于最后两列的文本范围从加拿大到美国，我真的不想将其设置为100px或其他什么，特别是当倒数第二列时只需要说，50px。

有办法吗？

第一列（尽可能宽）|第二列（尽可能窄）|第三栏就像第二栏一样。

Answer 1

使用css属性white-space:nowrap;来确保单词不会换行。

<强> CSS

table {
    width: 400px;
}
th, td {
    text-align: right;
    padding:0 5px;
    white-space:nowrap;
}

th:first-child, td:first-child {
    text-align:left;
    width:100%;
}

<强> HTML

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Frank</td>
        <td>26</td>
    </tr>
    <tr>
        <td>Marry</td>
        <td>31</td>
    </tr>
</table>

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Country</td>
    </tr>
    <tr>
        <td>Frank</td>
        <td>26</td>
        <td>United States</td>
    </tr>
    <tr>
        <td>Marry</td>
        <td>31</td>
        <td>Canada</td>
    </tr>
</table>

DEMO HERE：http://jsfiddle.net/7wt7d/2/

Answer 2

http://jsfiddle.net/xpHZ2/ http://jsfiddle.net/xpHZ2/show

我会使用col标签设置表格列的宽度。并使用white-space：nowrap确保文本包装在除第一个td之外的所有tds上。

<table>
    <col class="col name" />
    <col class="col age" />
    <col class="col country" />

.col.age {
    width: 10%;
}
.col.country {
    width: 20%;
}
td {
    white-space: nowrap;
}
td:first-child {
    white-space: normal;
}

表列 - 首先使用最多，其他最小

2 个答案: