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

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

小提琴

Answer 2

您可以使用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>

正如这个小提琴所示

Answer 3

当我width第一次尝试使用房产时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%;
}

你遇到的问题是什么？