获取表格以填充剩余宽度

Question

I'm having a bit of trouble getting my table to fill the remaining space within a floated element. This is what I'm trying to achieve:

And this is what I have so far:

HTML:

<div class="parent">
    <div class="left">

    </div>
    <div class="right">
        <table>
            <tr>
                <td>1</td>
                <td>2</td>
            </tr>
        </table>
    </div>
</div>

CSS:

.parent {
    height: auto;
    overflow: hidden;
}
.left {
    width: 125px;
    background: blue;
    float: left;
    height: 100px;
}
.right {
    background: red;
    height: 100px;
}
table {
    background: green;
    /*width: 100%;*/
}

I tried width: 100% but that doesn't take into account the left-floated element and the table gets hidden outside the container. I also tried display: block but that causes the <td> to no longer function as they would if they were inside a table.

jsFiddle

Answer 1

As you are float ing your .left div with the fixed width you can use a combination of the overflow:auto and width:auto (default value) to expand your .right div. Also uncomment width:100% to make table take the full width of the .right div:

.right {
  overflow:auto;
}

table {
  width: 100%;
}

Example