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

自动是默认值，大型表格会导致客户端滞后，因为浏览器会通过它来检查所有适合的大小。

已修复更好，并且可以更快地呈现页面。表的结构取决于表的总宽度和每列的宽度。

此处它适用于原始示例：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都溢出了。

This for example，我给表的宽度为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;。

Answer 7

使用table-layout属性和＆＃34; fixed＆＃34;你桌上的价值。

table {
   table-layout: fixed;
   width: 300px; /* your desired width */
}

设置表格的整个宽度后，您现在可以设置td的宽度％。

td:nth-child(1), td:nth-child(2) {
   width: 15%;  
}

您可以在此链接上了解详情：http://www.w3schools.com/cssref/pr_tab_table-layout.asp

Answer 8

我的疯狂解决方案。）

$(document).ready(function() {
    $("td").each(function(index) { 
    var htmlText = "<div style='width:300px;'>" + $(this).text() +"</div>";
    $(this).html(htmlText);
  });
});

Answer 9

如果表格宽度例如为100％，请尝试在td上使用百分比宽度，例如20％。

Answer 10

从div中的第一个单元格中包装内容，例如那样：

HTML：

<td><div class="rhead">a little space</div></td>

CSS：

.rhead {
  width: 300px;
}

这是jsfiddle。

Answer 11

您也可以使用：

.rhead {
    width:300px;
}

但这只适用于某些浏览器，如果我没记错，IE8不允许这样做。总而言之，将width=""属性放在<td>本身更安全。