使用CSS td宽度绝对值，位置

问题描述

请参见 JSFIDDLE

td.rhead { width: 300px; }

为什么CSS宽度不起作用?

Why doesn't the CSS width work?

<table>
<thead>
<tr>
<td class="rhead">need 300px</td>
<td colspan="7">Week #0</td>
<td colspan="7">Week #1</td>
<!-- etc..-->
</tr>
<tr>
<td class="rhead"></td>
<td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td>
<td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td>
<!-- etc... -->
</tr>
<thead>
</table>

此外，如果有的话，position:fixed，absolute等对td宽度有什么影响?我寻找的不仅仅是解决问题的原因.我希望了解它的工作原理.

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.

推荐答案

这可能不是您想要的内容，但是display: table-cell不考虑宽度，并且会基于整个表格的宽度而折叠.您只需在您指定宽度的表单元格内部包含一个display: block元素即可轻松解决此问题，例如

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>

如果<table>本身是position: fixed或绝对值，则此差别不大，因为单元格的位置相对于表格都是静态的.

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.

http://jsfiddle.net/ExplosionPIlls/Mkq8L/4/

我不能相信，但是正如评论所说，您可以在表格单元格上使用min-width代替width.

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

这篇关于使用CSS td宽度绝对值，位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！