Question

我目前有：

<div class="generic-block-70">
    <div class="generic-content-70">
        <table id="voteBlock">
            // stuff
    </table>
    </div>
</div>

但是，看到generic-block-70和generic-content-70没有设置高度，并且在添加文字时它们会垂直展开，我不能简单地将我的表格样式设置为height: 100%;。

有解决方法吗？

JSFiddle：http://jsfiddle.net/2vLEL/

Answer 1

在您的父overflow: auto;上设置div。

http://jsfiddle.net/2vLEL/2/

.generic-content-70 {
    overflow: auto;
}

Answer 2

我想我可能遇到过类似的问题。这就是我解决它的方式。我在表中嵌套了表。用户单击一个按钮，Javascript创建了新的表行和单元格，并使用表单中的数据填充单元格。为了强制单元格包装文本而不是水平扩展，我必须在单元格内使用<div></div>标记。为了强制“表格”在添加新表格行时不垂直展开，我必须在<div></div>下方放置<td>标记。

因此，从我的javascript创建的html可能看起来像这样。

<table id="root">
 <tr id="A">
  <td id="1" style="width:200px">Content</td>
  <td id="2" style="width:530px">
   <div height="correct_height" overflowY="auto">
    <table id="comments_table" style="width:510px table-layout:fixed">
     <tr>
      <td style="word-wrap:break-word">
       <div style="width:480px;white-space:nowrap">Comments</div>
      </td>
     </tr>
    </table>
   </div>
  </td>
 </tr>
 .
 .
 .
</table>

第一个<td id="1">由首先运行的函数创建。第二个<td id="2">是由运行之后的函数创建的，它抓取<td id="1">的高度，以便行中第二个单元格的高度取决于行中第一个单元格的高度。宽度按此布置，以便为垂直滚动条显示空间。

您必须减去所使用的任何填充。例如，如果两个元素具有style="padding:5px"，那么这意味着5top 5bottom x 2元素。所以：

var correct_height = A.offsetHeight - 20;

Answer 3

代码取决于意图：

如果您想将桌子锁定到一个高度，请给它一个高度：NNpx;
如果您想将div锁定到一个高度，请给它一个高度：NNpx;和溢出：MM;根据您的需求

有一个桌子垂直增长与扩展div

3 个答案: