td外边加div为啥不隐藏_为什么溢出：隐藏不工作在一个<td>？

小咪咪 2023-01-09 12:44 121阅读 0赞

这是同样的问题 。

你需要在table元素上设置table-layout:fixed 和一个合适的宽度，以及在表格单元格上设置overflow:hidden和white-space: nowrap 。

例子

固定宽度的列

表的宽度必须与固定宽度单元相同(或更小)。

有一个固定宽度的列：

\* \{ box-sizing: border-box; \} table \{ table-layout: fixed; border-collapse: collapse; width: 100%; max-width: 100px; \} td \{ background: \#F00; padding: 20px; overflow: hidden; white-space: nowrap; width: 100px; border: solid 1px \#000; \}

<table> 
 <tbody> 
  <tr> 
   <td> This_is_a_terrible_example_of_thinking_outside_the_box. </td> 
  </tr> 
  <tr> 
   <td> This_is_a_terrible_example_of_thinking_outside_the_box. </td> 
  </tr> 
 </tbody> 
</table>

这就是TD的方式。 我相信这可能是因为TD元素的“显示”属性固有地设置为“表格单元”而不是“块”。

在你的情况下，替代scheme可能是将TD的内容包装在DIV中，并将宽度和溢出应用于DIV。

This\_is\_a\_terrible\_example\_of\_thinking\_outside\_the\_box.

可能有一些填充或cellpadding问题需要处理，你最好删除内联样式，并使用外部的CSS来代替，但这应该是一个开始。

应用CSS table-layout:fixed; (有时width: )到TABLE和white-space: nowrap; overflow: hidden; white-space: nowrap; overflow: hidden; 在TD上的风格。 然后在正确的单元格或列元素上设置CSS宽度。

重要的是，固定布局表格列的宽度取决于表格第一行的单元宽度。 如果在第一行中有TH元素，并且宽度应用于TD(而不是TH)，则宽度仅适用于TD的内容(可以忽略空白和溢出)。 无论设置的TD宽度如何(因为在第一行的TH上没有指定宽度)，表列将均匀分布，并且列将具有\[计算出的\]相等的宽度; 该表格将不会根据后续行中的TD宽度重新计算列宽。 设置表格将遇到的第一个单元格元素的宽度。

或者，设置列宽的最安全的方法是在表格中使用

和标记，并在每个固定宽度COL上设置CSS宽度。 当表格知道列宽时，单元格宽度相关的CSS会变得更好。

我不熟悉具体的问题，但你可以在TD内粘贴一个div等，并设置溢出。

那么这里是一个解决scheme，但我不明白为什么它的作品：

Test

My hovercraft is full of eels. These pretzels are making me thirsty.

This\_is\_a\_terrible\_example\_of\_thinking\_outside\_the\_box.

<table style="border:2px solid #000000;border-collapse:collapse;width:200px;"> 
 <tbody> 
  <tr> 
   <td style="width:200px;border:1px solid #008000;"> 
    <div style="width:200px;border:1px solid #FFFF00;">
      This_is_a_terrible_example_of_thinking_outside_the_box. 
    </div></td> 
  </tr> 
 </tbody> 
</table>

即，将单元格内容包装在一个div中。

你必须设置表格的样式属性： width和table-layout: fixed; 让“溢出：隐藏” 属性正常工作。

Imo这个效果更好，然后使用带有width样式属性的div，尤其是在使用div来进行dynamicresize计算时，表格将会有一个更简单的DOM，这使得操作更容易，因为不需要填充和边距的更正

另外，您不必为所有单元格设置宽度，只能为第一行中的单元格设置宽度。

喜欢这个：

<table style="width:0px;table-layout:fixed;"> 
 <tbody> 
  <tr> 
   <td style="width:60px;"> Id </td> 
   <td style="width:100px;"> Name </td> 
   <td style="width:160px;"> VeryLongTextWhichShouldBeKindOfTruncated </td> 
  </tr> 
  <tr> 
   <td> Id </td> 
   <td> Name </td> 
   <td> VeryLongTextWhichShouldBeKindOfTruncated </td> 
  </tr> 
 </tbody> 
</table>

最好的解决scheme是将一个div放入零宽度的表格单元格中。 Tbody表格单元格将从定义thead的宽度inheritance它们的宽度。 位置：相对和利差应该做的伎俩！

这是一个截图： https ： //flic.kr/p/nvRs4j

<table> 
 <thead> 
  <tr> 
   <td style="width:100px;">ORDER</td> 
   <td style="width:100px;">NAME</td> 
   <td style="width:200px;">EMAIL</td> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><span>123</span></td> 
   <td><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit</span></td> 
   <td><span>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></td> 
  </tr> 
 </tbody> 
</table>

我刚刚有一个类似的问题，首先必须使用

中的

(John MacIntyre的解决scheme由于各种原因而不适用于我)。

请注意，虽然

...

不是div的有效位置，所以我使用了 和display:block; 组。 它现在validation好，工作。

为了使得更简单，我build议在td里面放一个textarea来pipe理自动溢出

$post\_title

需要改善