How to set up fixed width for ?

Question

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.

I just tried and it works - maybe the problem is somewhere different. What does Firebug tell you about the element? — Rockbot, Feb 27 '13 at 15:03
[In this site](http://ericsaupe.com/custom-column-widths-in-bootstrap-tables/), man is telling about this topic with video. It is so clear. — egemen, May 04 '14 at 15:55
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) — vinsa, Jan 30 '20 at 13:19

score 1287 · Accepted Answer · edited Feb 23 '18 at 11:26

1287

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.

edited Feb 23 '18 at 11:26

MaPePeR

931
9
18

answered Aug 28 '13 at 20:58

Paulo

13,937
1
20
10

89

What happens if you have more than 12 columns? – Jason Parker Dec 30 '14 at 23:29
41

you can apply this only in the in each tag and all rows will match – Diego Fernando Murillo Valenci Apr 20 '15 at 20:48
8

Is there documentation about this on the Bootstrap website? – Luis Perez Jun 05 '15 at 14:39
31

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. – DustinA Sep 24 '15 at 18:39
1

Also, instead of setting the class for reach row, we can simply set it once for the header and the rest is taken care of automatically! – dopplesoldner Oct 31 '15 at 19:13
1

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. – blackmambo Dec 07 '15 at 06:16
Use col-xs-* if you want this to apply to all screen sizes. – Brendan Nee Jun 24 '17 at 03:37
1

Bootstrap 3 doesn't have `col-` classes for table cells. – Sisir Jul 14 '18 at 07:17
1

In Bootstrap 4 you can also use classes to help with width: https://getbootstrap.com/docs/4.2/utilities/sizing/#relative-to-the-parent . E.g.: w-75 for 75% width. – Stefano Feb 17 '19 at 09:59
First one works for Bootstrap 5 too! – sajeyks mwangi Nov 27 '22 at 20:53

score 168 · Answer 2 · edited Jun 25 '15 at 22:32

168

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.

edited Jun 25 '15 at 22:32

Hunter Medney

381
2
10

answered Sep 30 '13 at 20:29

DDDD

3,790
5
33
55

Sure http://stackoverflow.com/questions/12881067/html-td-width-and-height, https://developer.mozilla.org/en/docs/Web/API/HTMLTableCellElement – Jon Koops Mar 14 '14 at 15:28
This is great, but as an addition use a `class` in the `td` tag instead of applying the style directly – Ramses Jun 22 '16 at 15:57
1

This works thanks **better** just enough to increase the width of `th` like : `` this will effect other columns width – Shaiju T Jun 27 '16 at 12:43
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. – maurisrx Oct 16 '18 at 16:43
This works. The key is the `table-layout: fixed`. That's required because many templates built with BS4 apply flex to everything, including tables. – Ivan May 10 '20 at 16:59

score 81 · Answer 3 · answered Jan 30 '15 at 03:17

81

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

answered Jan 30 '15 at 03:17

stormwild

2,855
2
31
38

2

I prefer this but it seems not affect to my case, the column width not extend by col-md-* – Osify Jul 30 '15 at 08:06
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-*? – LucioB Jul 20 '16 at 16:22
1

@LucioB you can use whichever you want and even use several of them by column (example `` will have a width of 33% in medium screen size and 50% in small screen size) – VDarricau Sep 09 '16 at 15:42
1

Colgroup is not working in Chrome. (Bootstrap v4.1). For uniformity across browsers, use % width for elements. – AnkitK Jul 04 '18 at 07:00
This helped me a lot. Exactly what I needed. Also Very flexible to use with different variations. – Yeshwant Mudholkar Jun 07 '21 at 14:29

score 76 · Answer 4 · edited Apr 04 '16 at 22:19

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

score 68 · Answer 5 · answered Feb 27 '13 at 15:08

68

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.

answered Feb 27 '13 at 15:08

meobyte

1,320
8
15

1

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. – Sammaye Mar 14 '14 at 12:49

ThiagoPXP · Answer 6 · 2015-10-16T06:24:11.343

61

In my case I was able to fix that issue by using min-width: 100px instead of width: 100px for the cells th or td.

.table td, .table th {
    min-width: 100px;
}

edited Oct 16 '15 at 06:24

answered May 07 '14 at 05:48

ThiagoPXP

5,362
3
31
44

18

This may have preserved what's left of my sanity. – Joel Feb 13 '15 at 21:43
Yes! this sets, well, the min-width for a column in a responsive table. Thanks. – O. Jones Sep 30 '15 at 23:02
1

this worked better than the answered question, thanks! – israel Mar 12 '18 at 18:24
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. – William T. Mallard Aug 07 '20 at 18:42
This works for me too! – Mandres Jan 13 '22 at 19:16

score 53 · Answer 7 · answered Jun 07 '18 at 10:23

53

For Bootstrap 4, you can simply use the class helper:

<table class="table">
  <thead>
    <tr>
      <td class="w-25">Col 1</td>
      <td class="w-25">Col 2</td>
      <td class="w-25">Col 3</td>
      <td class="w-25">Col 4</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      ...

answered Jun 07 '18 at 10:23

CHAN

1,518
18
16

5

This fit for my use case. Thanks! – tonny Jul 16 '18 at 07:38
25

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. – Abela Dec 01 '18 at 02:45

score 49 · Answer 8 · edited Jul 24 '20 at 20:07

49

Bootstrap 4.0

On Bootstrap 4.0, we have to declare the table rows as flex-boxes by adding class d-flex, and also drop xs, md, suffixes to allow Bootstrap to automatically derive it from the viewport.

So it will look following:

<table class="table">
    <thead>
        <tr class="d-flex">
            <th class="col-2"> Student No. </th>
            <th class="col-7"> Description </th>
            <th class="col-3"> Amount </th>
        </tr>
    </thead>

    <tbody>
        <tr class="d-flex">
            <td class="col-2">test</td>
            <td class="col-7">Name here</td>
            <td class="col-3">Amount Here </td>
        </tr>
    </tbody>
</table>

Hope this will be helpful to someone else out there!

Cheers!

edited Jul 24 '20 at 20:07

ravi879

3
2

answered May 20 '18 at 08:28

Randika Vishman

7,983
3
57
80

1

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 May 05 '21 at 21:32
1

This do the trick, very helpful – Felipe Castillo Oct 06 '22 at 16:05

score 14 · Answer 9 · answered Mar 05 '21 at 03:04

14

Bootstrap 4 and 5 have a width utility for resizing html element width Example:

<tr class="w-50">
    <td class="w-25">A</td>
    ...
</tr>

answered Mar 05 '21 at 03:04

Martins

1,130
10
26

score 12 · Answer 10 · answered Jul 30 '14 at 06:24

12

Try this -

<style>
 table { table-layout: fixed; }
 table th, table td { overflow: hidden; }
</style>

answered Jul 30 '14 at 06:24

Rohit Suthar

3,528
1
42
48

4

This is the only one that works out of all the other answers. – 0bserver07 Feb 22 '16 at 21:10
I also added `text-overflow: ellipsis` to make sure the cut-off text is apparent – weeksdev Jun 02 '16 at 13:35
@Observer07 Indeed – TheRandomGuy Mar 14 '17 at 06:06

score 8 · Answer 11 · answered Mar 06 '17 at 13:06

This combined solution worked for me, I wanted equal width columns

<style type="text/css">

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

        table th, table td {
            overflow: hidden;
        }

</style>

Result :-

score 4 · Answer 12 · answered Jul 20 '19 at 14:34

4

Use d-flex instead of row for "tr" in Bootstrap 4

The thing is that "row" class takes more width then the parent container, which introduces issues.

<table class="table">
  <tbody>
    <tr class="d-flex">
      <td class="col-sm-8">Hello</td>
      <td class="col-sm-4">World</td>
    </tr>
    <tr class="d-flex">
      <td class="col-sm-8">8 columns</td>
      <td class="col-sm-4">4 columns</td>
    </tr>
  </tbody>
</table>

answered Jul 20 '19 at 14:34

Usman Anwar

156
1
2

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. – Usman Anwar Feb 20 '20 at 08:38
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 May 05 '21 at 21:34

score 3 · Answer 13 · answered Feb 27 '13 at 14:56

Hard to judge without the context of the page html or the rest of your CSS. There might be a zillion reasons why your CSS rule is not affecting the td element.

Have you tried more specific CSS selectors such as

tr.somethingontrlevel td.something {
  width: 90px;
}

This to avoid your CSS being overridden by a more specific rule from the bootstrap css.

(by the way, in your inline css sample with the style attribute, you misspelled width - that could explain why that try failed!)

score 3 · Answer 14 · answered Feb 27 '13 at 15:06

3

Ok, I just figured out where was the problem - in Bootstrap is set up as a default value width for select element, thus, the solution is:

tr. something {
  td {
    select {
      width: 90px;
    }
  }
}

Anything else doesn't work me.

answered Feb 27 '13 at 15:06

user984621

46,344
73
224
412

score 3 · Answer 15 · answered Jan 17 '20 at 10:07

This is how I often do when I don't have to deal with IE

    <tr>
      <th scope="col" style="width: calc(1 * 100% / 12)">#</th>
      <th scope="col" style="width: calc(4 * 100% / 12)">Website</th>
      <th scope="col" style="width: calc(3 * 100% / 12)">Username</th>
      <th scope="col" style="width: calc(3 * 100% / 12)">Password</th>
      <th scope="col" style="width: calc(1 * 100% / 12)">Action</th>
    </tr>

That way you can have a familiar 12-col grid.

score 2 · Answer 16 · answered Dec 21 '16 at 11:39

I've been struggling with the issue for a while, so just in case when someone makes the same stupid mistake as me... Inside the <td> I had the element with white-space:pre style applied. That made all my table/tr/td tricks discarded. When I removed that style, suddenly all my text was nicely formatted inside the td.

So, always check the main container (like table or td) but also, always check if you don't cancel your beautifull code somewhere deeper :)

Shojaeddin · Answer 17 · 2019-11-13T14:07:47.057

2

In bootstarp 4 you can use row and col-* in table, I use it as below

<table class="table">
    <thead>
        <tr class="row">
            <th class="col-sm-3">3 row</th>
            <th class="col-sm-4">4 row</th>
            <th class="col-sm-5">5 row</th>
        </tr>
    </thead>
    <tbody>
        <tr class="row">
            <td class="col-sm-3">some text</td>
            <td class="col-sm-4">some text</td>
            <td class="col-sm-5">some text</td>
        </tr>
    </tbody>
</table>

edited Nov 13 '19 at 14:07

answered Nov 13 '19 at 13:58

Shojaeddin

1,851
1
18
16

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 May 05 '21 at 21:35

score 2 · Answer 18 · answered Aug 05 '20 at 05:33

2

use fixed table layout css in table, and set a percent of the td.

answered Aug 05 '20 at 05:33

xiu

19
2

score 1 · Answer 19 · answered Jun 28 '22 at 08:02

1

I also faced this problem and I follow this approach to overcome...So you can try

<td style="min-width:120px;">B</td>

answered Jun 28 '22 at 08:02

Rakib Ahasan

33
9

Please provide an explanation to your code - it is very hard to understand something when it isn't explained. Please also provide the full code. – ethry Jul 02 '22 at 21:19

score 0 · Answer 20 · edited Sep 05 '18 at 03:08

None of this work for me, and have many cols on datatable to make % or sm class equals to 12 elements layout on bootstrap.

I was working with datatables Angular 5 and Bootstrap 4, and have many cols in table. The solution for me was in the TH to add a DIV element with a specific width. For example for the cols "Person Name" and "Event date" I need a specific width, then put a div in the col header, the entire col width then resizes to the width specified from the div on the TH:

<table datatable [dtOptions]="dtOptions" *ngIf="listData" class="table table-hover table-sm table-bordered text-center display" width="100%">
    <thead class="thead-dark">
        <tr>
            <th scope="col">ID </th>
            <th scope="col">Value</th>
            <th scope="col"><div style="width: 600px;">Person Name</div></th>
            <th scope="col"><div style="width: 800px;">Event date</div></th> ...

score 0 · Answer 21 · answered Feb 13 '22 at 13:52

For me, setting the table's layout to auto and targeting the specific columns' <th> did the trick. I found that targeting <td> in any of the rows works as well. Feel free to throw in !important if you need to.

.table {
  table-layout: auto;
}

th {
 width: 10%;
}

score 0 · Answer 22 · answered Dec 02 '22 at 09:58

In my case i solved it this way

<style>
td {
    min-width: 175px;
}
</style>

So every table cell gets a mininum width of 175px. You may change the value to fit it to your purposes.

You can find more about min-width here: https://developer.mozilla.org/en-US/docs/Web/CSS/min-width?retiredLocale=de

score -1 · Answer 23 · answered Feb 15 '18 at 01:55

use .something without td or th

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  <style>
    .something {
      width: 90px;
      background: red;
    }
  </style>
</head>
<body>

<div class="container">
  <h2>Fixed width column</h2>            
  <table class="table table-bordered">
    <thead>
      <tr>
        <th class="something">Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

score -2 · Answer 24 · answered Jul 03 '20 at 04:32

in Bootstrap Table 4.x

If you are creating the table in the init parameters instead of using HTML.

You can specify the width parameters in the columns attribute:

$("table").bootstrapTable({
    columns: [
        { field: "title", title: "title", width: "100px" }
    ]
});

score -5 · Answer 25 · answered Jan 03 '19 at 07:06

<div class="row" id="divcashgap" style="display:none">
                <div class="col-md-12">
                    <div class="table-responsive">
                        <table class="table table-default" id="gvcashgapp">
                            <thead>
                                <tr>
                                    <th class="1">BranchCode</th>
                                    <th class="2"><a>TC</a></th>
                                    <th class="3">VourNo</th>
                                    <th class="4"  style="min-width:120px;">VourDate</th>
                                    <th class="5" style="min-width:120px;">RCPT Date</th>
                                    <th class="6">RCPT No</th>
                                    <th class="7"><a>PIS No</a></th>
                                    <th class="8" style="min-width:160px;">RCPT Ammount</th>
                                    <th class="9">Agging</th>
                                    <th class="10" style="min-width:160px;">DesPosition Days</th>
                                    <th class="11" style="min-width:150px;">Bank Credit Date</th>
                                    <th class="12">Comments</th>
                                    <th class="13" style="min-width:150px;">BAC Comment</th>
                                    <th class="14">BAC Ramark</th>
                                    <th class="15" style="min-width:150px;">RAC Comment</th>
                                    <th class="16">RAC Ramark</th>
                                    <th class="17" style="min-width:120px;">Update Status</th>
                                </tr>
                            </thead>
                            <tbody id="tbdCashGapp"></tbody>
                        </table>
                    </div>
                </div>
            </div>

This answer is confusing at best. Classes are weird, non-essential ids, no explanation. — GotBatteries, Nov 08 '19 at 09:27
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. — Kris Boyd, May 05 '21 at 21:37

How to set up fixed width for ?

25 Answers25

For Bootstrap 4.0:

For Bootstrap 3.0:

For Bootstrap 2.0:

Bootstrap 4.0

Linked