CODEWITHSUNDEEP
htmlcsshtml-table
divakar
divakar

Reputation: 1379

How to remove the space created in table overflow

Whenever I am trying to make my table scroll with overflow and display block css. Table width always getting reduced and leaves empty space. Why this is happening? What I am doing wrong here. My table is inside a div.

HTML:

<div id="window">
    <div id="tableContainer">
        <table>
            <thead>
                <tr>
                    <td>Column 1</td>
                    <td>Column 2</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                </tr>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                </tr>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                </tr>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                </tr>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                </tr>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                </tr>
                <tr>
                    <td>Data 1</td>
                    <td>Data 2</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

css:

div{
    width:500px;
    height:500px;
    display:block;

}
table 
{
width:180px;
height:100px;
display:block;
overflow:auto;
border:1px solid black;
}
table td{
    border:1px solid black;}
}

Fiddle:

http://jsfiddle.net/KrP7v/117/

Upvotes: 0

Views: 412

Answers (2)

Yair Biber
Yair Biber

Reputation: 21

Just add
table {empty-cells: hide;}

Upvotes: 0

Victor Sitnic
Victor Sitnic

Reputation: 380

HTML:

<div id="window">
<div id="tableContainer">
    <table>
        <thead>
            <tr>
                <td>Column 1</td>
                <td>Column 2</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
            </tr>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
            </tr>
        </tbody>
    </table>
</div>

CSS

#tableContainer{
   float:left;
   height:100px;
   display:block;
   overflow-y: scroll;
   float:left   
}
  table 
{
   height:100px;
   display:block;
   float:left;
}
table td{
    border:1px solid black;}
}

http://jsfiddle.net/4erveak/KrP7v/118/

Here is fix for your bug but at end add a div and get them style clear:both

Upvotes: 1

Related Questions