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

请参阅此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>

另外，position：fixed，absolute等对td宽度有什么影响？我寻找的不仅仅是解决问题的原因。我希望了解它是如何工作的。

这可能不是您想听到的，但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在表格单元格上。

你最好用 table-layout: fixed

“自动”是默认值，并且大表可能会导致客户端滞后，因为浏览器会对其进行迭代以检查所有大小是否合适。

固定好得多，并且可以更快地呈现到页面。表格的结构取决于表格的整体宽度和每列的宽度。

这里将其应用于原始示例：JSFIDDLE，您将注意到其余的列被压碎并覆盖了它们的内容。我们可以使用更多CSS来解决此问题（我所要做的就是在第一个TR中添加一个类）：

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

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

    td.rhead {
        width: 300px
    }

在这里看到了实际应用：JSFIDDLE

它在您提供的链接中不起作用的原因是，您正尝试显示300px列加上52列，每列跨越7列。缩小列数即可。屏幕上不能容纳那么多。

如果要强制列适合，请尝试设置：

body {min-width:4150px;}

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

原因是，因为您未指定表格的宽度，并且整个td都在溢出。

例如，我给表设置了5000px的宽度，我认为这可以满足您的要求。

table{
    width:5000px;
}

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

我相信这是因为您的TD已超出默认表格宽度。可以看到，如果您在每个tr中抽出约45个td（即您在问题中提供的代码，而不是jsfiddle），则可以正常工作

试试这个工作。

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

尝试使用

table {
  table-layout: auto;
}

如果使用Bootstrap，table则table-layout: fixed;默认情况下具有class 。

在表上使用table-layout属性和“ fixed”值。

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

我的疯狂解决方案。）

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

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

将内容从div中的第一个单元格换行，例如：

HTML：

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

CSS：

.rhead {
  width: 300px;
}

这是一个jsfiddle。

您还可以使用：

.rhead {
    width:300px;
}

但这仅适用于某些浏览器，如果我没记错的话，IE8不允许这样做。总的来说，将width=""属性放在<td>自身中会更安全。