Html 带引导的表格单元格宽度

我有一个简单的表，有两列，我想设置每列的宽度，例如左列30%右列70%。最终，我将有数百行，所以如果我可以应用一个全局css类，我想这将是最好的

当前左列已压缩，看起来不太好

如果有人能提供一些帮助，我已经创建了一个

<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>

行名称在这里
这是一个直径为0的拍卖行。杜内克和索达莱斯码头，欧盟车辆。佩伦特式居住者morbi tristique Sentecus et netus et malesuada以turpis egestas闻名。整数eget
这里是另一个行名
这是一个直径为0的拍卖行。杜内克和索达莱斯码头，欧盟车辆。佩伦特式居住者morbi tristique Sentecus et netus et malesuada以turpis egestas闻名。整数egetsddfsfsfsdf>

当我在

tr

的第一个

td

上尝试使用

width

属性时，它对我来说很好

行名称在这里
这是一个直径为0的拍卖行。杜内克和索达莱斯码头，欧盟车辆。佩伦特式居住者morbi tristique Sentecus et netus et malesuada以turpis egestas闻名。整数eget
这里是另一个行名
这是一个直径为0的拍卖行。杜内克和索达莱斯码头，欧盟车辆。佩伦特式居住者morbi tristique Sentecus et netus et malesuada以turpis egestas闻名。整型EGETSDDFSDF fsdfsdf

使用nowrap类为您的类定义最小宽度属性，如下所示：

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

更新您的

添加此CSS：

table.table.table-striped tr>td:第一个子项{
宽度：30%；
}

这是我的看法。为了便于访问，我在表中添加了一个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>

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

---

您可以使用css属性<代码>表格布局：固定这将强制列的给定宽度：

table {
    table-layout: fixed;
}

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

通常，您会为列中的每个单元格指定相同的宽度，但使用

表布局：固定
时，您只能在列的标题单元格上设置：

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


A列
B栏

如

运输署{
最大宽度：100px；
溢出：隐藏；
文本溢出：省略号；
单词包装：打断单词；
}
#someid tr td:n个孩子（1）{
宽度：10%；
}
在表中添加id“somdeid”
这里有一些文字
这里有一些长文本
@johnny\u s不需要，将其设置为第一个tr的tduse of width属性为deprecated@new_bee_magento检查或清楚地说明注意：不要在最新标准中使用此属性：而是设置CSS宽度属性。在HTML5中不受支持。+1帮助我@new_bee_magento，尽管我接受另一个答案，因为我认为css是最好的方法。
<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>