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

另外，position:fixed、absolute 等对 td 宽度有什么影响（如果有的话）？我正在寻找一个不仅仅是解决问题的原因。我希望了解它是如何工作的。

Answer 1

尝试使用

table {
  table-layout: auto;
}

如果你使用 Bootstrap，table 类默认有table-layout: fixed;。

Answer 2

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

HTML：

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

CSS：

.rhead {
  width: 300px;
}

这是jsfiddle。

Answer 3

使用表格布局属性和表格上的“固定”值。

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 4

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

Answer 5

你最好使用table-layout: fixed

Auto 是默认值，对于大型表格可能会导致一些客户端延迟，因为浏览器会遍历它以检查所有尺寸是否合适。

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

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

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

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

    td.rhead {
        width: 300px
    }

在这里看到实际操作：JSFIDDLE

Answer 6

你也可以使用：

.rhead {
    width:300px;
}

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

Answer 7

我的疯狂解决方案。）

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

Answer 8

原因，是因为你没有指定表格的宽度，你的一堆td都溢出了。

This for example，我给表格设置了 5000px 的宽度，我认为这符合您的要求。

table{
    width:5000px;
}

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

我相信正在发生的事情是因为您的 TD 超出了默认表格宽度。你可以看到，如果你在每个 tr 中取出大约 45 个 td，（即你在问题中提供的代码，而不是 jsfiddle）它工作得很好

Answer 9

它在您提供的链接中不起作用的原因是因为您试图显示一个 300 像素的列加上 52 列，每列跨越 7 列。减少列数，它可以工作。你不能在屏幕上放那么多。

如果您想强制列适合尝试设置：

body {min-width:4150px;}

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

Answer 10

这可能不是你想听到的，但display: table-cell 不尊重宽度，会根据整个表格的宽度折叠。您可以通过在您指定宽度的表格单元格本身内添加一个 display: block 元素来轻松解决这个问题，例如

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

如果<table> 本身是position: fixed 或绝对值，这应该没有太大区别，因为单元格的位置相对于表格都是静态的。

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

编辑：我不能相信，但正如 cmets 所说，您可以在表格单元格上使用 min-width 而不是 width。

Answer 11

试试这个吧。

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