1

我有一个宽度较小且可见溢出的 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>

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

4

1 回答 1

2

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

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

jsfiddle 示例

<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 样式使它们模仿表格。它更容易编码（至少对我来说，一开始需要一些时间来适应。）但它对浏览器更友好，你有更多的空间可以玩。

于 2013-09-27T15:32:31.440 回答