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>

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

Answer 2

您可以使用css属性table-layout: fixed这将强制列上的给定宽度：

table {
    table-layout: fixed;
}

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

Updated fiddle

通常，您会为列中的每个单元格指定相同的宽度但使用table-layout: fixed只能在列的标题单元格中设置它：

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

如this fiddle

所示

Answer 3

当我在width的{{1}} td尝试使用tr属性时，它适用于我

<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%;
}

使用psudo代码：

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

你遇到的问题是什么？

Answer 4

使用类nowrap为您定义min-width属性，如下所示：

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

更新了您的fiddle

Answer 5

添加此CSS：

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

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>

带引导程序的表格单元格宽度

6 个答案: