Question

我在表格单元格中有一个div。它们的内容将动态变化。我希望div在溢出的情况下提供垂直滚动条（不是为了扩展包含单元格的高度！）。我目前的实施适用于Chrome和Safari ，但不适用于IE和Firefox ！下面是一个示例代码，代表我的问题：http://jsfiddle.net/vuSAz/5/（在IE和Chrome上打开它以查看差异）

我正在寻找CSS解决方案（不使用JS来调整大小）。我不想为细胞设置固定的高度。我希望表格适合容器div，即使容器高度已经改变。

HTML：

<div class="container">
<div class="table">
    <div class="table-row">
        <div class="cell">
            <div class="cellHeader">Header 1</div>
            <div class="cellContent"></div>            
        </div>
        <div class="cell">
            <div class="cellHeader">Header 2</div>
            <div class="cellContent"></div>            
        </div>        
    </div>
    <div class="table-row">
        <div class="cell">
            <div class="cellHeader">Header 1</div>
            <div class="cellContent"></div>            
        </div>
        <div class="cell">
            <div class="cellHeader">Header 2</div>
            <div class="cellContent">
                <div>sample content</div>
                <div>sample content</div>
                <div>sample content</div>
                <div>sample content</div>
                <div>sample content</div>
                <div>sample content</div>
                <div>sample content</div>
                <div>sample content</div>
                <div>sample content</div>
                <div>sample content</div>    
            </div>            
        </div>     
    </div>
    <div class="table-row">
        <div class="cell">
            <div class="cellHeader">Header 1</div>
            <div class="cellContent"></div>            
        </div>
        <div class="cell">
            <div class="cellHeader">Header 2</div>
            <div class="cellContent"></div>            
        </div>     
    </div>    
</div>    
</div>

CSS：

.container{
    height:500px;
    width:100%;
}
.table{
    display:table;
    border-collapse:collapse;
    height:100%;
    width:100%;
}
.table-row{
    display:table-row;
}
.cell{
    display:table-cell;
    border: 1px solid black;
    padding:5px;
    height:20%;
    width:50%;
}
.cellHeader{
    height:20px;
}
.cellContent{
    overflow-x:hidden;
    overflow-y:auto;
    height:90%;
}

Answer 1

我不确定这是否是您正在寻找的，但如果您希望单元格可滚动

.cellContent{
overflow-x:hidden;
height:5em;
}

Answer 2

我不明白为什么你会使用 divisions 而不是 tables ，但除此之外，我想我可以帮助你。您似乎想要一个添加滚动条而不会使高度更大的分区。我认为你的问题是，当滚动条出现时，它会使分割大于没有滚动条的分割。只需将以下css应用于我们正在谈论的div：

box-sizing:border-box;
moz-box-sizing:border-box;

这告诉浏览器宽度和高度应该显示元素的真实尺寸。让我举几个例子：

<div style="width:400px;padding:100px;border:20px solid #000">content</div>

上面的分区在屏幕上的真实宽度为640px（ 2个边框+2个填充+宽度）;

<div style="width:400px;padding:100px;border:20px solid #000;box-sizing:border-box">content</div>

上面的分区在屏幕上的真实宽度为400px。浏览器计算（ 2个边框+ 2个填充）并从宽度中减去它以确定内容应该具有的宽度。

Answer 3

浏览器在没有水平滚动条的情况下进行较长的除法，因为文本的格式为宽度：

a b c d e f g

变为

a
b
c
...

您可以通过向文本添加css属性来避免此行为：

white-space:nowrap;

表单元格内容可滚动在IE 11上不起作用

3 个答案: