Question

I want to create a table that is fully contained within its parent element, but having column widths that are resolved based on their content. If the required length of the table is longer than the content box of the parent element, then a horizontal scrollbar shall appear underneath the table. I tried fiddling with the table-layout and overflow properties, but without success.

HTML code:

<div>
<table>
    <tr>
        <td>fixed_length_text</td>
        <td>variable_length_text</td>
        <td>image</td>
        <td>double_float_double_float</td>
    </tr>
    <tr>
        <td>fixed_length_text</td>
        <td>variable_length_text_variable_length_text</td>
        <td>image</td>
        <td>double_float_double_float</td>
    </tr>
</table>
</div>

CSS code:

div {
    padding: 10px;
    background: grey;
    width: 400px;
}

table {
    border-collapse: separate;
    border-spacing: 2px;
    background: white;
}

tr {
    background: green;
}

This is what I have tried on jsFiddle. Is there anyway to combine the best of both worlds?

Answer 1

Try overflow-x:auto;. This applies to just the horizontal axis of the element.