First gets way too wide while making a scrollable table

Question

<div class="scrollable">
    <table>
        <thead>
            <tr>
                <th class="nothing_here">Nothing here</th>
                <th>Tora Gargano</th>
                <th>Emory Beck</th>
                <th>Jane Doe</th>
                <th>Yoshiko Beekman</th>
                <th>Treasa Norris</th>
                <th>Jane Doe</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>Actions</th>
                <td>blah</td>
                <td>blah</td>
                <td>blah</td>
                <td>blah</td>
                <td>blah</td>
                <td>blah</td>
            </tr>
            <tr>
                <th>Status</th>
                <td>Pending</td>
                <td>Done</td>
                <td>Pending</td>
                <td>Pending</td>
                <td>Done</td>
                <td>Pending</td>
            </tr>
            <tr>
                <th>Actions</th>
                <td>blah</td>
                <td>blah</td>
                <td>blah</td>
                <td>blah</td>
                <td>blah</td>
                <td>blah</td>
            </tr>
            <tr>
                <th>Status</th>
                <td>Pending</td>
                <td>Done</td>
                <td>Pending</td>
                <td>Pending</td>
                <td>Done</td>
                <td>Pending</td>
            </tr>
        </tbody>
    </table>
</div>

The names in the thead element doesn't align properly with the values below. The first child of th element covers up all the space available.

Here is a link to jsfiddle of my problem http://jsfiddle.net/zLc48uga/ Any ideas?

possible duplicate of [HTML table with 100% width, with vertical scroll inside tbody](http://stackoverflow.com/questions/17067294/html-table-with-100-width-with-vertical-scroll-inside-tbody) — Vincent Ramdhanie, Nov 21 '14 at 03:14
Changing display to table-cell or table-row-group doesn't work because I need vertical scrolling. With table-cell or table-cell-group, it ignores the height and overflow property — maddiemadan, Nov 21 '14 at 03:19

Richard Czechowski · Answer 1 · 2014-11-21T03:18:07.287

2

If you remove "display:block" from your css all of them line up just fine. Is that what you mean? The table needs to be display:table-cell, otherwise the heads can't line up with the data.

Edit

Sorry for the above, I misunderstood. Add display block to your thead too.

.scrollable thead {
display: block;
}

edited Nov 21 '14 at 03:18

answered Nov 21 '14 at 03:08

Richard Czechowski

433
2
8

But then I won't be able to make it scrollable – maddiemadan Nov 21 '14 at 03:12

Prabu · Answer 2 · 2014-11-21T03:22:50.333

0

The solution to this problem involves making the thead element a block element.

To achieve this, you need to apply the following CSS:

.scrollable thead {
    display: block;
}

DEMO: http://jsfiddle.net/pwee167/zLc48uga/2/

edited Nov 21 '14 at 03:22

answered Nov 21 '14 at 03:16

Prabu

4,097
5
45
66

2

But the headings doesnt align with the data – maddiemadan Nov 21 '14 at 11:57

score 0 · Answer 3 · answered Nov 21 '14 at 03:18

I think what you tried to do is setting the header fixed, and make the body scrollable.

There is a few ways to do that, but there isn't a good way to do it. One way, cross-browser, could be using two different tables: one for your head and the other for your body, and place your body table inside a fixed height div.

For example:

    <table>
        <tr>
            <th class="nothing_here">Nothing here</th>
            <th>Tora Gargano</th>
            <th>Emory Beck</th>
            <th>Jane Doe</th>
            <th>Yoshiko Beekman</th>
            <th>Treasa Norris</th>
            <th>Jane Doe</th>
        </tr>
    </table>
    <div class="scrollable">
       <table>
         <tr>
             <th>Actions</th>
             <td>blah</td>
             <td>blah</td>
             <td>blah</td>
             <td>blah</td>
             <td>blah</td>
             <td>blah</td>
         </tr>
         <tr>
             <th>Actions</th>
             <td>blah</td>
             <td>blah</td>
             <td>blah</td>
             <td>blah</td>
             <td>blah</td>
             <td>blah</td>
         </tr>
         <tr>
             <th>Actions</th>
             <td>blah</td>
             <td>blah</td>
             <td>blah</td>
             <td>blah</td>
             <td>blah</td>
             <td>blah</td>
         </tr>
       </table>
    </div>

You can find a demo for that case here: Demo

I recommend you to use DataTables, it's a good and simple solution using javascript.

score 0 · Answer 4 · answered Nov 21 '14 at 03:20

If you really want to break that table apart to add scrolling this is how you can do it:

html {
    overflow-y:hidden;
}
.scrollable thead tr {
    position: relative;
    display: block;
}
.scrollable thead th {
    position: relative;
    display: inline-block;
    margin-left: 6px;
}
.scrollable tbody {
    display: block;
    height: 100px;
    overflow-y: scroll;
}
.scrollable tbody td, .scrollable tbody th {
    position: relative;
    text-align: center;
    width: 80px;
}

<div class="scrollable">
    <table>
        <thead>
            <tr>
                <th class="nothing_here">Nothing here</th>
                <th>Tora Gargano</th>
                <th>Emory Beck</th>
                <th>Jane Doe</th>
                <th>Yoshiko Beekman</th>
                <th>Treasa Norris</th>
                <th>Jane Doe</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>Actions</th>
                <td>blah</td>
                <td>blah</td>
                <td>blah</td>
                <td>blah</td>
                <td>blah</td>
                <td>blah</td>
            </tr>
            <tr>
                <th>Status</th>
                <td>Pending</td>
                <td>Done</td>
                <td>Pending</td>
                <td>Pending</td>
                <td>Done</td>
                <td>Pending</td>
            </tr>
            <tr>
                <th>Actions</th>
                <td>blah</td>
                <td>blah</td>
                <td>blah</td>
                <td>blah</td>
                <td>blah</td>
                <td>blah</td>
            </tr>
            <tr>
                <th>Status</th>
                <td>Pending</td>
                <td>Done</td>
                <td>Pending</td>
                <td>Pending</td>
                <td>Done</td>
                <td>Pending</td>
            </tr>
            <tr>
                <th>Actions</th>
                <td>blah</td>
                <td>blah</td>
                <td>blah</td>
                <td>blah</td>
                <td>blah</td>
                <td>blah</td>
            </tr>
            <tr>
                <th>Status</th>
                <td>Pending</td>
                <td>Done</td>
                <td>Pending</td>
                <td>Pending</td>
                <td>Done</td>
                <td>Pending</td>
            </tr>
            <tr>
                <th>Actions</th>
                <td>blah</td>
                <td>blah</td>
                <td>blah</td>
                <td>blah</td>
                <td>blah</td>
                <td>blah</td>
            </tr>
            <tr>
                <th>Status</th>
                <td>Pending</td>
                <td>Done</td>
                <td>Pending</td>
                <td>Pending</td>
                <td>Done</td>
                <td>Pending</td>
            </tr>
        </tbody>
    </table>
</div>

First gets way too wide while making a scrollable table

4 Answers4