logo标签列表

TD宽度不起作用？

htmlcsshtml-tablewidth
132

所以我有这段代码：

<table>
    <tr>
        <td width="200px" valign="top">
            <div class="left_menu">
                <div class="menu_item">
                    <a href="#">Home</a>
                </div>
            </div>
        </td>
        <td width="1000px" valign="top">Content</td>
    </tr>
</table>

使用CSS

.left_menu {
    background: none repeat scroll 0 0 #333333;
    border-radius: 5px 5px 5px 5px;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
}

.menu_item {
    background: none repeat scroll 0 0 #CCCCCC;
    border-bottom: 1px solid #999999;
    border-radius: 5px 5px 5px 5px;
    border-top: 1px solid #FFFFCC;
    cursor: pointer;
    padding: 5px;
}

在我的浏览器上它能正常工作，我已在Mac和PC的每个浏览器中进行了测试，但有人抱怨带有宽度为200的td的宽度在不断变化。我不知道他在说什么。是否有人知道为什么他或她会看到td的宽度发生变化？

那么当我们对投诉的内容一无所知时，我们该如何提供帮助呢？我们甚至无法测试真实页面，也没有关于某人及其浏览环境的任何信息。 - Jukka K. Korpela
15个回答
159

应该是这样的：

<td width="200">
或者
<td style="width: 200px">
请注意，如果您的单元格中包含一些超出200像素宽度的内容（如somelongwordwithoutanyspaces），该单元格将仍然会被拉伸，除非您的CSS对表格使用了table-layout: fixed。 编辑 正如克里斯蒂娜·奇尔兹在她的答案中指出的那样，应避免使用width属性和使用行内CSS（带有style属性）。尽可能地分离样式和结构是一个好的实践。
63
表格是否应该设置为 <table style="table-layout:fixed;">。 - user979331
4
@user1193385，是的，就是这样。但如果可能的话，请避免使用内联CSS。 - bfavaretto
5
除非你只需要在一个地方使用，否则内联CSS不是一个好主意。另外，td宽度已经被废弃了一段时间。请参见下面的答案。 - kristina childs
2
@kristinachilds 我同意。我在我的示例中使用了内联CSS，这样我就不需要将HTML和CSS拆分为两个代码块。我在上面添加了一条评论，告诉OP要避免使用内联CSS。关于宽度属性，从技术上讲，它并没有被弃用（因为HTML5规范仍然是一个工作草案），但你是对的，应该避免使用它。我会在我的答案中加上一条注释。 - bfavaretto
简单解决方案：使用<col>而不是td宽度：https://dev59.com/b3NA5IYBdhLWcg3wgeSk - dude
显示剩余2条评论
41
 <table style="table-layout:fixed;">

这将强制应用样式的宽度 <td>。如果文本溢出，它将重叠其他 <td> 的文本。因此尝试使用媒体查询。

1
在我的情况下（Firefox 70.0），table-layout:fixed 分配了固定宽度给列，所以我无法再使用 jQuery 更改 width。 - Jose Manuel Abarca Rodríguez
39

表格中的宽度和/或高度不再是标准；正如Ianzz所说，它们已被弃用。相反，最好的方法是在表格单元格中有一个块级元素，该元素将保持单元格打开至所需大小：

<table>
    <tr>
        <td valign="top">
            <div class="left_menu">
                <div class="menu_item">
                    <a href="#">Home</a>
                </div>
            </div>
        </td>
        <td valign="top" class="content">Content</td>
    </tr>
</table>

CSS

.content {
    width: 1000px;
}

.left_menu {
    background: none repeat scroll 0 0 #333333;
    border-radius: 5px 5px 5px 5px;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
    width: 200px;
}

.menu_item {
    background: none repeat scroll 0 0 #CCCCCC;
    border-bottom: 1px solid #999999;
    border-radius: 5px 5px 5px 5px;
    border-top: 1px solid #FFFFCC;
    cursor: pointer;
    padding: 5px;
}
12
很不幸，电子邮件技术在很多方面落后于当前的HTML规范，因此，在这种情况下，表格和内联CSS是不可避免的。 - Mike G
2
没有人在谈论HTML电子邮件，这是针对基本的桌面Web浏览。但是，是的，对于电子邮件，表格和内联CSS是构建它们的唯一方法。谢谢，微软... - kristina childs
4
我之所以提到电子邮件，是因为那就是导致我来这里的原因；我之前在处理电子邮件中遇到了同样的问题。 - Mike G
20
这个问题可以通过在CSS规则中使用min-width和max-width来轻松解决。
HTML
<table>
  <tr>
    <td class="name">Peter</td>
    <td class="hobby">Photography</td>
    <td class="comment">A long comment about something...</td>
  </td>
</table>
CSS
.name {
  max-width: 80px;
  min-width: 80px;
}

这将强制第一列宽度为80像素。通常我只使用最大宽度而不设置最小宽度来控制偶尔会出现的过长文本，以避免创建一个有大量空白列的超宽表格。但是，OP的问题是关于设置为固定宽度，因此需要同时使用这两条规则。在许多浏览器中，CSS中的width:80px;对于表格列是被忽略的。在HTML中设置宽度可以起作用，但这不是你应该做的事情。

我建议使用最小和最大宽度规则，并不要将它们设置成相同的，而是设置一个范围。这样表格可以正常工作，但你可以给它一些提示，让它知道如何处理过长的内容。

如果我想保持文本不换行并增加行高 - 但仍然使用户能够看到完整的文本，我会在主要规则上使用white-space: nowrap;，然后应用一个悬停规则，取消宽度和nowrap规则，以便用户在将鼠标悬停在上面时可以查看完整的内容。 类似于这样：

CSS

.name {
  max-width: 80px;
  white-space: nowrap;
  overflow: hidden;
}
.name:hover {
  max-width: none;
  white-space: normal;
  overflow:auto;
}

这取决于您要实现什么。我希望这能帮助到某些人。 PS 顺带一提，对于iOS，有一个解决悬停不起作用的方法-请参见CSS Hover Not Working on iOS Safari and Chrome

8
你可以在 <td> 标签内使用 CSS : display:inline-block。
例如：<td style="display:inline-block">。
这是唯一适用于我的答案，但我无法解释。 - Ron
7
7

在表格的width/height属性中，您无法指定单位；它们始终以像素表示，但您不应使用它们，因为它们已过时。

3

尝试一下这个：

word-break: break-all;
2
<td>的nowrap属性在HTML5中不被支持。请使用CSS代替。 - LowFieldTheory
2
尝试使用。
word-wrap: break-word;

希望这能帮到您

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接