Question

My question is simple. In this jsfiddle: http://jsfiddle.net/nyCKE/2/ I have a atable which contains a scroll bar and the table scrolls with fixed headers. But what my question is that I don’t want the scroll bar to be displayed underneath the last column as it is, I want it displayed next to the last column so that it does not take up some space next to the last table column. But what do I need to change css/html in order to be able to do this?

Below is HTML:

<table>
    <thead>
        <tr>
            <td>Problem</td>
            <td>Solution</td>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

Below is CSS:

table {
    background-color: #aaa;
}
tbody {
    background-color: #ddd;
    height: 100px;
    overflow: auto;
}
td {
    padding: 3px 10px;
}

thead > tr, tbody{
    display:block;}

Answer 1

tbody{
    width: 110%; 

}

This needs to be tested though