Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Table cell width with bootstrap

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.

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>
like image 729
jonboy Avatar asked Jul 09 '15 13:07

jonboy


People also ask

How do I set the width of a Bootstrap table?

Add . w-auto class to the table element to set an auto width to the table column. The width of the columns will automatically adjust to the content of the column. That means it will always take a minimum width required to present its content.

How do you set the size of a column in a Bootstrap responsive table?

Table column width use the same layout as grids do; using col-[viewport]-[size] . Remember the column sizes should total 12; 1 + 3 + 3 + 5 = 12 in this example. Remember to set the <th> elements rather than the <td> elements so it sets the whole column.

How do you change the width of a TD table?

To set the cell width and height, use the CSS style. The height and width attribute of the <td> cell isn't supported in HTML5. Use the CSS property width and height to set the width and height of the cell respectively. Just keep in mind, the usage of style attribute overrides any style set globally.


2 Answers

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

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

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

Fiddle

like image 59
Krishanu Dey Avatar answered Sep 19 '22 03:09

Krishanu Dey


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

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: fixed you can set it only on the header cell of the column:

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

As shown in this fiddle

like image 22
jazZRo Avatar answered Sep 18 '22 03:09

jazZRo