How to set up fixed width for <td>?
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.
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.
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.