较小 div 内的表格的 HTML/CSS 自动宽度，溢出可见答案

【问题标题】：HTML/CSS auto width for a table inside smaller div with overflow visible较小 div 内的表格的 HTML/CSS 自动宽度，溢出可见
【发布时间】：2013-09-27 23:40:03
【问题描述】：

我有一个宽度较小且溢出可见的 div。我有一个更大的表格，里面只有一个单元格和一个文本：

<div style="overflow:visible;width:0px;">
  <table> 
    <tr>
      <td style="border:solid">
         A small text with spaces...
      </td>
    </tr>
  </table>
</div>

我希望表格的宽度自动设置为文本宽度但不换行。即，如果我只写，我希望得到相同的结果：

<table> 
  <tr>
    <td style="border:solid">
       A small text with spaces...
    </td>
  </tr>
</table>

如何在不指定精确宽度的情况下将表格设置为不“最小宽度”？

【问题讨论】：

请添加你的CSS，不是很清楚，你想要实现什么。也许表格单元格上的white-space: nowrap; 可能会有所帮助。但是您实际上要解决什么问题？这看起来根本不像表格数据，因此使用表格并不是最佳选择。如果您稍微解释一下您的真正目标，也许我们可以找到一个简单的解决方案。
有点不清楚你想要实现什么...你在寻找min-width，即min-width: 100px;吗？
从代码 sn-p 我不确定你为什么需要那个表，为什么不直接使用 div 标签虽然我怀疑你有一个在这里不清楚的原因，但更多信息会很有用

标签： css html width overflow

【解决方案1】：

我想你的答案就在这里：Object larger than outside div

它使用绝对位置来删除它周围的容器的规定。然后是定位问题，但您可以通过设置左侧和顶部 CSS 规则来解决此问题。

jsfiddle example

<div style="overflow:visible;width:0px;">
     <table> 
     <tr>
     <td style="border:solid;position:absolute;">
         A small text with spaces...
      </td>
    </tr>
  </table>
</div>
<div style="overflow:visible;width:0px;padding-top:30px;">
  <table> 
    <tr>
      <td style="border:solid;white-space:nowrap;">
         A small text with spaces...
      </td>
    </tr>
  </table>
</div>

编辑

正如“insertusernamehere”在上面的评论中所说："white-space:nowrap;" 也可以。

注意：

表格不是最好用的东西。使用 DIV 并设置 `"float:left/right;" CSS 样式使它们模仿表格。它更容易编码（至少对我来说，一开始需要一些时间来适应。）但它对浏览器更友好，你有更多的空间来玩。

【讨论】：