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

Question

我有一个小宽度的 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>

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

Answer 1

我想您的答案就在这里:Object larger than outside div

它使用绝对位置来移除围绕它的容器的规定。一个问题是定位，但您可以通过设置 left 和 top 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 样式，以便它们模仿表格。它更容易编码(至少对我来说，一开始需要一些时间来适应。)但它对浏览器更友好，你有更多的发挥空间。