Advertisement
Advertisement


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.

2019/01/03
1
524
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:

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

2018/02/23
1118
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;
}

Template:

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

Please use CSS for structuring any layouts.

2015/06/25

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

2015/01/30

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

2016/04/04

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.

2013/02/27

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;
}
2015/10/16