我在表格单元格中有一个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%;
}
答案 0 :(得分:0)
我不确定这是否是您正在寻找的,但如果您希望单元格可滚动
.cellContent{
overflow-x:hidden;
height:5em;
}
答案 1 :(得分:0)
我不明白为什么你会使用 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个填充)并从宽度中减去它以确定内容应该具有的宽度。
答案 2 :(得分:0)
浏览器在没有水平滚动条的情况下进行较长的除法,因为文本的格式为宽度:
a b c d e f g
变为
a
b
c
...
您可以通过向文本添加css属性来避免此行为:
white-space:nowrap;