力表列的宽度总是被不管内容

固定我有table-layout: fixed一个HTML表，并用一组宽度的TD。该列仍然展开以保存不包含空格的文本内容。有没有办法解决这个问题，而不是将每个td的内容包装在一个div中？力表列的宽度总是被不管内容

<table> 
    <tbody> 
     <tr> 
      <td style="width: 50px;">Test</td> 
      <td>Testing 1123455</td> 
     </tr><tr> 
      <td style="width: 50px;">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td> 
      <td>B</td> 
     </tr> 
    </tbody> 
</table> 

table 
{ 
    table-layout: fixed; 
} 

td 
{ 
    border: 1px solid green; 
    overflow: hidden; 
}

在这个例子中，你可以看到，尽管被明确地设置为50像素宽与AAAAAAAAAAAA列...扩展。

来源

2013-03-27 datadamnation

重复的http://stackoverflow.com/q/4457506/1190388 – hjpotter92 2013-03-27 20:22:36

124

指定表格的宽度：

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

见jsFiddle

来源

2013-03-27 20:26:41

这就是我想念的，谢谢您。 – datadamnation 2013-03-27 20:59:38

非常感谢你为这个... – 2014-09-15 06:33:56

它只是改变了我的一天有点更愉快.. :) – 2014-09-15 06:34:30

我会尝试将其设置为最大宽度：50像素;

来源

2013-03-27 20:20:40 Alex

和宽度：50px;如果你真的想固定宽度。 – 2018-01-15 21:26:39

使表坚如磐石的CSS了。图你的表格的宽度，然后使用“控制”行，其中每一个TD有一个明确的宽度，所有这些都在表标签加起来的宽度。

必须先做好几百个html电子邮件才能在任何地方工作，首先使用正确的HTML，然后使用w/css样式将解决所有IE，webkit和mozilla中的许多问题。

这样：

<table width="300" cellspacing="0" cellpadding="0"> 
    <tr> 
    <td width="50"></td> 
    <td width="100"></td> 
    <td width="150"></td> 
    </tr> 
    <tr> 
    <td>your stuff</td> 
    <td>your stuff</td> 
    <td>your stuff</td> 
    </tr> 
</table>

会保持一个表中300像素宽。手表比宽度由极端

来源

2013-03-27 20:20:46

试着看下面的CSS较大的图像：

word-wrap:break-word;

Web浏览器不应该分手默认“改为”那么，你遇到的是一个正常行为浏览器。但是，您可以使用单词换CSS指令来覆盖它。

您需要在整个表上设置宽度，然后在列上设置宽度。 “宽度：100％;”根据您的要求也应该可以。

使用自动换行可能不是您想要的，但它可用于显示所有数据而不会使布局变形。

来源

2013-03-27 20:22:39

这与阿里肖的回答结合起来，让我我一直在寻找的行为。无论文本如何，该列的宽度始终相同，即使没有空格，它也会包装文本。 – datadamnation 2013-03-27 21:00:50

我正在寻找这样的事情，但是这似乎如果表中未设置为表格的布局不工作：固定的。然而，如果表头有一个colspan，表格布局固定不是css风格的。你如何在一张桌子上使用自动换行功能？ http://stackoverflow.com/questions/42371945/set-forced-width-with-css-on-td-which-is-under-th-with-colspan-without-using – Manuel 2017-02-21 15:57:41

您可以将div添加到td，然后改为style。它应该按照你的预期工作。

<td><div>AAAAAAAAAAAAAAAAAAA</div></td>

，那么Css。

td div { width: 50px; overflow: hidden; }

来源

2013-03-27 20:26:06

您也可以一起工作 “溢出：隐藏” 或 “溢出-X：隐藏”（只是宽度）。这需要一个定义的宽度（和/或高度？），也可能是“display：block”。

“溢出：隐藏”隐藏了整个内容，它不适合定义的框。

例子：

http://jsfiddle.net/NAJvp/

HTML：

<table border="1"> 
    <tr> 
     <td><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td> 
     <td>bbb</td> 
     <td>cccc</td> 
    </tr> 
</table>

CSS：

td div { width: 100px; overflow-y: hidden; }

编辑：可耻的是我，我已经看到了，你人准备使用“溢出”。我猜这是行不通的，因为你没有为你的元素设置“display：block”...

来源

2013-03-27 20:28:33

力表列的宽度总是被不管内容

回答

相关问题