Search code examples
jqueryhtml-tablewidthcell

Wide table in scrollable div squishing cells

I have a table with an arbitrary amount of columns and rows and the <td> tags have a height and width. My issue is when I put it in a <div> with overflow:scroll and a width less than the width of the table, the table cells get squished, even though I have a specified width on them.

I've done a bunch of testing and it appears if I specify the width of the table, it looks fine. There's got to be a CSS way of doing it without specifying the table width.

This is the gist of my code and css along with a JSFiddle demo (the number of columns doesn't matter, so long as it's greater than the width of the div

<div class="wrapper">
    <table cellspacing="0" cellpadding="0" class="Colors">
        <tbody>
            <tr>
            <td><td>
            <td><td>
            <td><td>
            <td><td>
            <td><td>
            <td><td>
            <td><td>
            <td><td>
        </tbody>
    </table>
</div>

CSS:

table.Colors td {
    width:25px;
    height:25px;
    font-size:.8em;
    line-height:25px;
    border:1px solid #c0c0c0;
    padding:0;
    margin:0;
}

.wrapper {
    overflow:scroll;
    width:300px;
    height:300px;
}

http://jsfiddle.net/nightcatbooks/L7gwwyL4/

Solution

  • Specify a min-width for the cells so that they don't get squished:

    table.Colors td {
    width:25px;
    min-width:25px;

    Might not work on older browsers (IE7? not tested)

    Working fiddle: http://jsfiddle.net/pxth1hph/