使用Bootstrap设置表格单元格宽度

Question

我有一张简单的表格，其中有两列。我想设置每列的宽度，例如左列30%，右列70%。最终我会有数百行数据，如果可以应用全局CSS类，那么这是最好的选择吧？

目前左列被压缩了，看起来不好看。

我创建了一个jsfiddle，如果有人能提供帮助的话。

<div class="container">
    <div class="row col-md-8">
        <table class="table table-striped">
            <tr>
                <td>row name here</td>
                <td>sed auctor diam sollicitudin ut. Donec et sodales quam, eu vehicula urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer eget</td>
            </tr>
            <tr>
                <td>another row name here</td>
                <td>sed auctor diam sollicitudin ut. Donec et sodales quam, eu vehicula urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer egetsdsdfsdf fsdfsdf</td>></tr>
        </table>
    </div>
</div>

- jonboy

Answer 1

这是我的看法。我已经为表格添加了一个id以便更容易访问。 标记

<div class="container">
    <div class="row col-md-8">
        <table class="table table-striped" id="someid">
            <tr>
                <td>row name here</td>
                <td>sed auctor diam sollicitudin ut. Donec et sodales quam, eu vehicula urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer eget</td>
            </tr>
            <tr>
                <td>another row name here</td>
                <td>sed auctor diam sollicitudin ut. Donec et sodales quam, eu vehicula urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer egetsdsdfsdf fsdfsdf</td>></tr>
        </table>
    </div>
</div>

CSS

#someid tr td:nth-child(1){
    width:30%;
}

Fiddle

- Krishanu Dey

Answer 2

当我在第一个的< td>上尝试使用width属性时，它对我来说运行良好。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
        <div class="row col-md-8">
            <table class="table table-striped">
                <tr>
                    <td width="30%">row name here</td>
                    <td width="70%">sed auctor diam sollicitudin ut. Donec et sodales quam, eu vehicula urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer eget</td>
                </tr>
                <tr>
                    <td>another row name here</td>
                    <td>sed auctor diam sollicitudin ut. Donec et sodales quam, eu vehicula urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer egetsdsdfsdf fsdfsdf</td></tr>
            </table>
        </div>
    </div>

根据最新的更新，td中的width属性将不再受支持，因此您应该通过CSS设置宽度。

#someid tr td{
    width:30%;
}

使用伪代码:

#someid tr td:nth-child(1){
    width:30%;
}

你遇到了什么问题？

- Butterfly

---

使用width属性已被弃用。 - Harsh

@new_bee_magento 请查看 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td 或 http://www.w3schools.com/tags/tag_td.asp。 - Harsh

它明确说明：请勿在最新标准中使用此属性：而是设置CSS宽度属性。在HTML5中不受支持。 - Harsh

是的，但这意味着我们应该避免使用这些属性。 - Harsh

不支持意味着将来不会得到支持或无法正常工作。 - Harsh

Answer 3

你可以使用CSS属性table-layout: fixed。这将强制对列使用给定的宽度：

table {
    table-layout: fixed;
}

td:first-child {
    width: 30%;
}
td:last-child {
    width: 70%;
}

更新的代码片段

通常情况下，您需要给列中的每个单元格设置相同的宽度，但是使用table-layout:fixed，您只需在该列的标题单元格上设置宽度即可：

<thead>
    <tr>
        <th class="first">Column A</th>
        <th class="second">Column B</th>
    </tr>
</thead>

如这个示例所示

- jazZRo

Answer 4

为具有nowrap类的元素定义min-width属性，如下所示：

td.nowrap {
  min-width: 129px;
}

已更新您的fiddle

- Shane_Yo

Answer 5

请添加以下CSS代码：

table.table.table-striped tr > td:first-child {
    width:30%;
}

- Jason Williams

Answer 6

<style>

td{
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
}

#someid tr td:nth-child(1){
    width:10%;
}

</style>



add id "somdeid" in table

<table id="someid">
<tbody>
<tr>
<td>some text here</td>
<td>some long text here</td>
</tr>
</tbody>
</table>

- Yeni User