103

请看这个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 宽度有什么影响（如果有的话）？我正在寻找一个不仅仅是解决问题的原因。我希望了解它是如何工作的。

td 宽度不是所需的 300px

4

11 回答 11

145

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

于 2013-02-08T04:58:14.570 回答
29

你最好使用table-layout: fixed

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

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

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

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

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

    td.rhead {
        width: 300px
    }

在这里看到的行动：JSFIDDLE

于 2014-09-17T09:33:34.417 回答
11

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

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

body {min-width:4150px;}

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

于 2013-02-08T04:46:48.887 回答
8

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

例如，我给表格设置了 5000 像素的宽度，我认为这符合您的要求。

table{
    width:5000px;
}

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

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

于 2013-02-08T05:03:16.857 回答
5

试试这个它工作。

<table>
<thead>
<tr>
<td width="300">need 300px</td>
于 2013-02-08T04:46:46.860 回答
5

尝试使用

table {
  table-layout: auto;
}

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

于 2014-08-14T17:52:44.273 回答
4

我的疯狂解决方案。）

$(document).ready(function() {
    $("td").each(function(index) { 
    var htmlText = "<div style='width:300px;'>" + $(this).text() +"</div>";
    $(this).html(htmlText);
  });
});
于 2014-02-18T13:39:13.423 回答
4

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

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

于 2016-12-28T05:52:30.630 回答
2

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

于 2016-10-07T09:30:18.287 回答
2

将 div 中第一个单元格的内容包装起来，例如：

HTML：

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

CSS：

.rhead {
  width: 300px;
}

这是一个jsfiddle。

于 2017-04-05T12:17:49.070 回答
1

您还可以使用：

.rhead {
    width:300px;
}

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

于 2013-02-08T04:53:40.703 回答