带引导程序的表格单元格宽度 [英] Table cell width with bootstrap

问题描述

我有一个包含两列的简单表，我想设置每列的宽度，例如，左列为30％，右列为70％.最终，我将有数百行，因此，如果我可以应用全局CSS类，那我认为那是最好的吗?

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?

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

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

如果有人可以提供帮助，我已经创建了 jsfiddle .

I have created a jsfiddle if somebody could lend some assistance.

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

推荐答案

这是我的看法.我已经在表格中添加了一个ID，以便于访问.

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

标记

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

小提琴

这篇关于带引导程序的表格单元格宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！