سؤال

I have a div inside table cells. Content of them will dynamically change. I want the div to provide vertical scrollbar in case of overflow (not to expand the height of containing cell!). My current implementation works fine on Chrome and Safari but not on IE and Firefox! Here is a sample code represents my problem: http://jsfiddle.net/vuSAz/5/ (open it on IE and chrome to see the difference)

I'm looking for CSS solution (not using JS to resize). I don't want to set fixed height for cells. I want the table to fit in the container div even if the container height is changed.

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%;
}

لا يوجد حل صحيح

نصائح أخرى

I'm not sure if this is what you're looking for, but if you want the cell scrollable

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

I don't understand why you would use divisions instead of tables, but that aside, i think I can help you. You seem to want a division that adds a scrollbar without making the height bigger. I think your problem is that when the scrollbar appears it makes the division bigger than it would be without the scrolllbar. Just apply the following css to the div we're talking about:

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

This tells the browser that the width and height should display the true dimensions of the element. Let me give you some examples:


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

The division above has a true width of 640px on the screen (2 borders + 2 paddings + width);

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

The division above has a true width of 400px on the screen. the browser calculated (2 borders + 2 paddings) and substracted it from the width to decide what width the content should have.

The browser makes a longer division without horizontal scrollbar because the text is formatted to the width:

a b c d e f g

becomes

a
b
c
...

You can avoid this behaviour by adding a css property to the text:

white-space:nowrap;
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top