How to set up fixed width for <td>?

css twitter-bootstrap width html-table

1,164,792

Solution 1

For Bootstrap 4.0:

In Bootstrap 4.0.0 you cannot use the col-* classes reliably (works in Firefox, but not in Chrome). You need to use OhadR's answer:

<tr>
  <th style="width: 16.66%">Col 1</th>
  <th style="width: 25%">Col 2</th>
  <th style="width: 50%">Col 4</th>
  <th style="width:  8.33%">Col 5</th>
</tr>

For Bootstrap 3.0:

With twitter bootstrap 3 use: class="col-md-*" where * is a number of columns of width.

<tr class="something">
    <td class="col-md-2">A</td>
    <td class="col-md-3">B</td>
    <td class="col-md-6">C</td>
    <td class="col-md-1">D</td>
</tr>

For Bootstrap 2.0:

With twitter bootstrap 2 use: class="span*" where * is a number of columns of width.

<tr class="something">
    <td class="span2">A</td>
    <td class="span3">B</td>
    <td class="span6">C</td>
    <td class="span1">D</td>
</tr>

** If you have <th> elements set the width there and not on the <td> elements.

Solution 2

I was having the same issue, I made the table fixed and then specified my td width. If you have th you can do those as well.

table {
    table-layout: fixed;
    word-wrap: break-word;
}

Template:

<td style="width:10%">content</td>

Please use CSS for structuring any layouts.

Solution 3

Instead of applying the col-md-* classes to each td in the row you can create a colgroup and apply the classes to the col tag.

    <table class="table table-striped">
        <colgroup>
            <col class="col-md-4">
            <col class="col-md-7">
        </colgroup>
        <tbody>
        <tr>
            <td>Title</td>
            <td>Long Value</td>
        </tr>
        </tbody>
    </table>

Demo here

Solution 4

Hopefully this one will help someone:

<table class="table">
  <thead>
    <tr>
      <th style="width: 30%">Col 1</th>
      <th style="width: 20%">Col 2</th>
      <th style="width: 10%">Col 3</th>
      <th style="width: 30%">Col 4</th>
      <th style="width: 10%">Col 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Val 1</td>
      <td>Val 2</td>
      <td>Val 3</td>
      <td>Val 4</td>
      <td>Val 5</td>
    </tr>
  </tbody>
</table>

https://github.com/twbs/bootstrap/issues/863

Solution 5

If you're using <table class="table"> on your table, Bootstrap's table class adds a width of 100% to the table. You need to change the width to auto.

Also, if the first row of your table is a header row, you might need to add the width to th rather than td.

View more solutions

1,164,792

Author by

user984621

Updated on July 31, 2022

Comments

user984621 almost 2 years
Simple scheme:
```
  <tr class="something">
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
  </tr>
```
I need to set up a fixed width for <td>. I've tried:
```
tr.something {
  td {
    width: 90px;
  }
}
```
Also
```
td.something {
  width: 90px;
}
```
for
```
<td class="something">B</td>
```
And even
```
<td style="width: 90px;">B</td>
```
But the width of <td> is still the same.
- Rockbot over 11 years
  
  I just tried and it works - maybe the problem is somewhere different. What does Firebug tell you about the element?
- egemen about 10 years
  
  In this site, man is telling about this topic with video. It is so clear.
- vinsa over 4 years
  
  use style="width: 1% !important;" to make the width as tight as the longest word in the column, it's useful for the first ID/# column. Tested in chrome(desktop&mobile), opera (desktop), IE(desktop), edge(desktop), firefox(desktop)
Sammaye over 10 years

As an addition on Bootstrap 3 you will also need to set the white-space property of the th to normal since it is nowrap currently as such headers won't break.
Jon Koops over 10 years

Sure stackoverflow.com/questions/12881067/html-td-width-and-heigh‌t, developer.mozilla.org/en/docs/Web/API/HTMLTableCellElement
ClearCloud8 over 9 years

What happens if you have more than 12 columns?
Joel over 9 years

This may have preserved what's left of my sanity.
Diego Fernando Murillo Valenci about 9 years

you can apply this only in the <head> in each <th> tag and all rows will match
Luis Perez about 9 years

Is there documentation about this on the Bootstrap website?
Osify almost 9 years

I prefer this but it seems not affect to my case, the column width not extend by col-md-*
DustinA almost 9 years

This works, but it's not on the bootstrap site because those col-* classes aren't meant to be used this way. They are meant to be used in the responsive bootstrap grids. If you like what these do, consider looking at the CSS for them and copy it to make your own CSS.
O. Jones over 8 years

Yes! this sets, well, the min-width for a column in a responsive table. Thanks.
dopplesoldner over 8 years

Also, instead of setting the class for reach row, we can simply set it once for the header <th> and the rest is taken care of automatically!
blackmambo over 8 years

This is impractical. I have tried this and it not the best was given a certain number of columns needed. As you mentioned "fixed with", using col-sm-3, for example, if not fixed but responsive. I suggest using a fixed width table layout and applying px width like style="width: 120px". It works for me the way i want to. When the browser is resized, the table stays the same and I can scroll through the rest of it. Also, I have tried using various column sizes at mobile and desktop, it is still impractical for a table design and they still behaved in a responsive way.
0bserver07 over 8 years

This is the only one that works out of all the other answers.
weeksdev about 8 years

I also added text-overflow: ellipsis to make sure the cut-off text is apparent
Ramses about 8 years

This is great, but as an addition use a class in the td tag instead of applying the style directly
Shaiju T about 8 years

This works thanks better just enough to increase the width of th like : <th style="width: 25%;"></th> this will effect other columns width
LucioB almost 8 years

I like this solution, by the way, why one is forced to use col-md-* classes and not col-lg-* ,col-sm-* or col-xs-*?
VDarricau almost 8 years

@LucioB you can use whichever you want and even use several of them by column (example <col class="col-md-4 col-sm-6"> will have a width of 33% in medium screen size and 50% in small screen size)
TheRandomGuy over 7 years

@Observer07 Indeed
Brendan Nee about 7 years

Use col-xs-* if you want this to apply to all screen sizes.
israel over 6 years

this worked better than the answered question, thanks!
AnkitK almost 6 years

Colgroup is not working in Chrome. (Bootstrap v4.1). For uniformity across browsers, use % width for <td> elements.
Sisir almost 6 years

Bootstrap 3 doesn't have col- classes for table cells.
tonny almost 6 years

This fit for my use case. Thanks!
maurisrx over 5 years

Thank you! I've set col-md-x class for Bootstrap 3 but it didn't work. Setting the table layout to "fixed" resolves my issue.
Abela over 5 years

Important to note that the only w-* options are: .w-25, .w-50, .w-75, .w-100, .w-auto so if you want something else, say, w-10 you will need to add .w-10 { width: 10% !important; } to your localized css file.
Akash Dubey over 5 years

Add some explanation too.
Stefano over 5 years

In Bootstrap 4 you can also use classes to help with width: getbootstrap.com/docs/4.2/utilities/sizing/… . E.g.: w-75 for 75% width.
GotBatteries over 4 years

This answer is confusing at best. Classes are weird, non-essential ids, no explanation.
Usman Anwar over 4 years

I meant "row" instead of "tr". As the row class comes with gutters on both ends. Or if you wan't to use the "row" class just add "no-gutters" class.
Ivan about 4 years

This works. The key is the table-layout: fixed. That's required because many templates built with BS4 apply flex to everything, including tables.
William T. Mallard almost 4 years

min-width worked for me where width did not, I'm guessing it's because I didn't make the table "fixed width" as I still wanted the rest of the columns to resize automatically.
Kris Boyd about 3 years

Note limitation on this: seems as though if you use d-flex you lose the ability to use the align-* helper functions for the fields. it no longer has an effect.
Kris Boyd about 3 years

Note limitation on this: seems as though if you use d-flex or row classes you lose the ability to use the align-* helper functions for the fields. it no longer has an effect.
Kris Boyd about 3 years

Note limitation on this: seems as though if you use d-flex or row you lose the ability to use the align-* helper functions for the fields. it no longer has an effect.
Kris Boyd about 3 years

Using CSS in this manner is quite irresponsible. If you have unique identifiers, you should be using ID, first off. Secondly, using pixels is miserable when it comes to responsiveness. Thirdly, you should never define css in this manner anyway, you will never be able to maintain this in the future. And finally, as stated above, you need to explain your reasoning.
Yeshwant Mudholkar about 3 years

This helped me a lot. Exactly what I needed. Also Very flexible to use with different variations.
Mandres over 2 years

This works for me too!