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

Table cell width with bootstrap

提问by jonboy

I have a simple table with two columns, I would like the to set the width of each of these columns, for example left column 30% right column 70%. Eventually I will have hundreds of rows so If I can apply a global css class I guess that would be best?

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

Currently the left column is compressed and doesn't look good.

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

I have created a jsfiddleif somebody could lend some assistance.

如果有人可以提供帮助，我已经创建了一个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>

回答by Krishanu Dey

Here is my take on it. I've added an id to the table for easier access.

这是我的看法。我在表中添加了一个 id 以便于访问。

The Markup

标记

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

The CSS

CSS

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

Fiddle

小提琴

回答by Butterfly

when I tried with widthproperty on first tdof trit works fine for me

当我首先尝试使用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>

As per latest update, width attribute in tdwill no longer supported, so you should set width through css.

根据最新更新，td将不再支持宽度属性 in ，因此您应该通过 css 设置宽度。

#someid tr td{
    width:30%;
}

using psudo code:

使用伪代码：

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

whats the issue you faced?

你遇到的问题是什么？

回答by jazZRo

You can use the css property table-layout: fixedThis will force the given width on the columns:

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

table {
    table-layout: fixed;
}

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

Updated fiddle

更新的小提琴

Normally you would give every cell in the column the same width but with table-layout: fixedyou can set it only on the header cell of the column:

通常你会给列中的每个单元格table-layout: fixed设置相同的宽度，但你只能在列的标题单元格上设置它：

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

As shown in this fiddle

如这个小提琴所示

回答by Shane_Yo

Define a min-width property for your with the class nowrap, like so:

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

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

Updated your fiddle

更新了你的小提琴

回答by Jason Williams

Add this CSS:

添加这个CSS：

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

回答by Yeni User

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