How to set up fixed width for ?


Simple scheme:

  <tr class="something">

I need to set up a fixed width for <td>. I've tried:

tr.something {
  td {
    width: 90px;


td.something {
  width: 90px;


<td class="something">B</td>

And even

<td style="width: 90px;">B</td>

But the width of <td> is still the same.

1/3/2019 8:05:18 PM

Accepted Answer

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:

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

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>

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>

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

2/23/2018 11:26:27 AM

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;


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

Please use CSS for structuring any layouts.


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">
            <col class="col-md-4">
            <col class="col-md-7">
            <td>Long Value</td>

Demo here


Hopefully this one will help someone:

<table class="table">
      <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>
      <td>Val 1</td>
      <td>Val 2</td>
      <td>Val 3</td>
      <td>Val 4</td>
      <td>Val 5</td>


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.


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;