Question

I’m trying to create an HTML table where the column widths are changed dynamically, and in case the table width becomes larger than the container, a horizontal scrollbar appears.

However, I can’t seem to get this to work – when I set the container width, it acts as an upper bound for the table and even though I set a column’s width explicitly (either using CSS or Jquery) the table refuses to display the correct width. Even when I set “overflow: scroll”, the scrollbar never becomes active.

The table width should also decrease when the column widths become smaller, which is why I can’t use table width = 100%.

Note: I know this issue can be bypassed if I explicitly set the table width (e.g. table width=500px) every time a column width changes. I am hoping there is a more elegant solution…

Here is the code:

JFiddle: http://jsfiddle.net/sangil/NdY22/

HTML

<div class="container">
<table>
    <thead>
        <tr>
            <th class="a">th 1</th>
            <th>th 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>td 1</td>
            <td>td 2</td>
        </tr>
    </tbody>
</table>
</div>

CSS

table {
    table-layout: fixed;
    border: 1px solid black;
    border-collapse: collapse;
}

table td {
    border: 1px solid black;
}

table th {
    border: 1px solid black;
    background-color: lightsteelblue;
}


.container{
    border: 1px solid lightsteelblue;
    width: 300px; 
    overflow: auto;                
}

JS

$(function() {
   $('.a').width(500);
});

​

Answer 1

Not sure if I understood your question correctly. If you are after scrollbars in table then you can simple do that by using display: block on .a class:

.a {
    width: 400px;
    display:block;
}

Working DEMO