Html 使用CSS td宽度、绝对位置

请看这个

为什么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>

需要300像素
第0周
第1周
SMTWTFS
SMTWTFS

此外，位置：固定、绝对等对td宽度有何影响（如有）？我在寻找一个原因，而不是修复。我希望了解它是如何工作的

试试这个，它会起作用的

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

需要300像素

它在您提供的链接中不起作用的原因是您试图显示一个300px列加上52列，每个列跨越7列。缩小列的数量，它就会工作。屏幕上放不下那么多

如果要强制列匹配，请尝试设置：

body {min-width:4150px;}

请参阅我的JSFIDLE： @迈克，我还不能发表评论。

你也可以使用：

.rhead {
    width:300px;
}

---

但如果我没记错的话，这只适用于某些浏览器，IE8不允许这样做。总之，将

width=”“

属性放在

本身中更安全。

这可能不是您想要听到的，但是

display:table cell

不考虑宽度，将根据整个表的宽度进行折叠。您只需在表单元格内部设置一个

display:block

元素，即可轻松解决此问题，例如

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

宽

如果

本身是

位置：固定的

或绝对的，这应该没有多大区别，因为单元格的位置相对于表格都是静态的

---

编辑：我不能赊账，但正如评论所说，您可以在表格单元格上使用

minwidth

而不是

width

。

原因是，您没有指定表格的宽度，而您的所有td都溢出了

，我给这张桌子定了5000px的宽度，我想这会符合你的要求

table{
    width:5000px;
}

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

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

我的疯狂解决方案。）

$（文档）.ready（函数（）{
$（“td”）。每个（函数（索引）{
var htmlText=”“+$（this.text（）+”；
$（this.html（htmlText）；
});
});

尝试使用

table {
  table-layout: auto;
}

---

如果使用引导，类

表
具有
表布局：固定默认设置。
您最好使用
表格布局：修复

Auto是默认值，对于较大的表，当浏览器遍历它以检查所有大小是否合适时，可能会导致客户端延迟

修复的效果更好，渲染速度更快。表的结构取决于表的总宽度和每列的宽度

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

在这里的操作中可以看到：
如果表格宽度为100%，请尝试在td上使用百分比宽度，例如20%。
使用表格布局属性和表格上的“固定”值

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

设置完表格的整个宽度后，现在可以设置td的%宽度

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

您可以通过此链接了解中的更多信息：
从div中的第一个单元格包装内容，例如：

HTML:

这是一个。
显示：表格单元格
不考虑
宽度
（与它不适用于
显示：内联
的方式相同）。我不明白你对ExplosionPills的
位置固定|绝对
@ExplosionPills有什么疑问，因为在我的实际代码中，我将表设置为固定。你可以猜到，我正试图在页面顶部实现一个时间表。所以我只是说，以防位置属性影响宽度。可能重复+1-我以前使用过这个解决方法。奇怪的是，
TD
上的
min-width
在Chrome和FF中似乎确实有效：实际上，和往常一样，在发布问题后，我发现
min-width:300px
有效！（@TimMedora你比我快了几秒钟！）我认为最好的答案是提到显示：表格单元格行为。谢谢这种行为对我来说很有意义：如果为同一列上的两个单元格设置两种不同的宽度，会发生什么？使用
minwidth
没有问题，但是，使用最大的。这是一种攻击，我不推荐使用。合并的td宽度溢出了表格宽度。这就是问题所在。您不应该通过添加更多HTML结构来解决这个问题。+1表示有一个表宽度阈值。问题是有时我们手边不知道总宽度。默认的桌子宽度是多少？我不知道。我所知道的是，如果列太多，表将被挤压，导致所有子节点宽度无效。我以前遇到过这种情况，但我“我还没有找到默认值。也许我应该问这个问题。我相信我解决了这个问题。这是实际的答案，而不是评价很高的答案。只有当内容没有溢出整个表格宽度时，才能设置宽度。发现表格宽度阈值随正文宽度增加+1。哇！非常感谢。♥请添加一些解释，说明此代码为何/如何帮助OP。这将有助于提供未来观众可以从中学习的答案。有关更多信息，请参阅。注意，的width属性在HTML5中已被弃用。
    table {
        width: 100%;
        table-layout: fixed;
    }

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

    td.rhead {
        width: 300px
    }

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

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

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

.rhead {
  width: 300px;
}