Question

这个问题对某些人来说可能看起来很愚蠢。我很抱歉，我对CSS并不讳言。

现在，我有一个包含2列的表（需要相等）。表格宽度为100％，需要使用页面调整大小。

标题，没关系。它只包含2个单元，2-3个单词，所以没有问题。

现在，以下每个单元格都包含相当多的大文本，我需要按原样显示（无包装）。

我做了什么：

<style>
.contentDiv
{
        display: inline-block;
        overflow-x:auto;
        overflow-y:hidden;
        white-space: nowrap;
        white-space: nowrap;
}
</style>

<table style="width:100%">
  <th>
    <tr><td with="50%">head 1</td><td width="50%">head 2</td></tr>
  </th>
  <tbody>
    <tr>
      <td><div class="contentDiv">big-text-here</div></td>
      <td><div class="contentDiv">big-text-here</div></td>
    </tr>
  </tbody>
</table>

底线是我希望表格具有全宽，内部内容单元格具有表格宽度的一半，文本（无论多大）不改变布局（滚动条应该出现，如果内容大于所需的表面）。

谢谢！

Answer 1

这应该消除任何包装。

td { position: relative; }
.contentDiv
{
    display: inline-block;
    overflow-x:auto;
    overflow-y:hidden;
    white-space: nowrap;
    white-space: nowrap;
    position: absolute; 
}

Answer 2

我有点不知道你的意思，但我确定你的意思是http://jsfiddle.net/mDXb5/你上面的代码也遇到了一些你应该编辑的问题。 e.g：

</table> tag is missing instead you use </tr> which is wrong

带溢出的可调整大小的div

2 个答案: