使用CSS td width absolute,position

Question

请看这个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宽度有什么影响？我正在寻找一个不仅仅是修复的理由.我希望了解它是如何工作的.

Answer 1

这可能不是您想听到的,但display: table-cell不尊重宽度,将根据整个表的宽度折叠.只需display: block在表格单元格内部放置一个您指定宽度的元素,就可以轻松解决这个问题

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

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

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

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

Answer 2

你最好不要使用 table-layout: fixed

Auto是默认值,大型表可能会导致一些客户端延迟,因为浏览器会遍历它以检查所有大小是否合适.

固定更好,并使页面更快.表的结构取决于表的总宽度和每列的宽度.

这里它应用于原始示例:JSFIDDLE,您将注意到剩余的列被压缩并重叠其内容.我们可以用更多的CSS来解决这个问题(我必须做的就是在第一个TR中添加一个类):

    table {
        width: 100%;
        table-layout: fixed;
    }

    .header-row > td {
        width: 100px;
    }

    td.rhead {
        width: 300px
    }

在这里看到的行动:JSFIDDLE

Answer 3

它在您提供的链接中不起作用的原因是因为您试图在每个跨度7列显示300px列PLUS 52列.缩小列数,它的工作原理.你不能在屏幕上适应那么多.

如果要强制列适合尝试设置:

body {min-width:4150px;}

看我的jsfiddle:http://jsfiddle.net/Mkq8L/6/ @mike我还不能发表评论.

Answer 4

原因是,因为你没有指定表的宽度,而你的整个td都溢出了.

例如,我给表的宽度为5000px,我认为这符合您的要求.

table{
    width:5000px;
}

它与您提供的代码完全相同,我只是在表格宽度中添加.

我相信正在发生的事情是因为你的TD超过了默认的表格宽度.你可以看到,如果你在每个tr中拉出大约45个你的td(即你在问题中提供的代码,而不是jsfiddle),它的工作正常

Answer 5

试试这个工作吧.

<table>
<thead>
<tr>
<td width="300">need 300px</td>

Answer 6

尝试使用

table {
  table-layout: auto;
}

如果使用Bootstrap,table则table-layout: fixed;默认使用class .