Jake Jake - 4 months ago 43
CSS Question

Why does CSS td width not work?

Please see this JSFIDDLE

td.rhead { width: 300px; }

Why doesn't the CSS width work?

<td class="rhead">need 300px</td>
<td colspan="7">Week #0</td>
<td colspan="7">Week #1</td>
<!-- etc..-->
<td class="rhead"></td>
<!-- etc... -->

Also, what are the effects of position:fixed, absolute etc have on td widths if any? I am looking for a reason more than a fix. I am hoping to understand how it works.

td width is not 300px as desired


This may not be what you want to hear, but display: table-cell does not respect width and will be collapsed based on the width of the entire table. You can get around this easily just by having a display: block element inside of the table cell itself whose width you specify, e.g

<td><div style="width: 300px;">wide</div></td>

This shouldn't make much of a difference if the <table> itself is position: fixed or absolute because the position of the cells are all static relative to the table.


EDIT: I can't take credit, but as the comments say you can just use min-width instead of width on the table cell instead.