请看一下这个JSFIDDLE

td.rhead { width: 300px; }

为什么CSS宽度不起作用?

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

另外,位置:固定、绝对等对TD宽度有什么影响(如果有的话)?我要找的不只是解决问题的理由.我希望了解它是如何工作的.

td宽度不是所需的300px

推荐答案

这可能不是您想要听到的,但是display: table-cell不考虑宽度,将根据整个表格的宽度折叠.只需在表格单元格中包含一个display: block元素(其宽度由您指定),就可以很容易地解决此问题,例如

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

如果<table>本身是position: fixed还是绝对的,这应该没有太大区别,因为单元格的位置都是相对于表格的静电.

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

编辑:我不能相信,但正如 comments 所说,你可以在表格单元格中使用min-width而不是width.

Html相关问答推荐

网格容器中的定心元件

当光标悬停在(相同)父元素上方时,为多个子元素创建不同的过渡动画

Css网格:两列,除非小于150px

如何使用CSS创建文件夹选项卡的形状?

带有图标和悬停过渡的CSS按钮

元素offsetTop在滚动容器中时没有更改

Swift WKUserContentController 和 WKScriptMessageHandler 设置不正确

四开将一个 qmd 文档中的单词链接到另一个 qmd 文档中的单词

如何通过像图像一样的 元素来调整 SVG 图标的大小

使用 R markdown 在 html 中包含图像

什么没有 margin-right 和 width:100% 溢出子元素到左边?

如何从 razor 页面打开 html 页面

如何使用 CSS 制作蜂窝状网格?

右对齐 bootstrap 导航项而不是下拉菜单

项目的水平列表:倒数第二个项目居中,而最后一个项目占据所有剩余空间

圆形边框显示在该部分后面.怎么修?

使用 bootstrap-icons 的未排序图标堆栈

隐藏在标题后面的下拉菜单

在 EJS 中将元素放置在彼此下方的列中

如何创建 宏?