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

时间:2014-03-06 16:06:39

标签: html css css-tables

我在表格单元格中有一个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%;
}

3 个答案:

答案 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;