CSS: Inline element stretch to fill available horizontal space of container

<div style="display:table;width:200px">
    <div style="display:table-row">
        <button style="display:table-cell">1</button>
        <button style="display:table-cell">2</button>
        <button style="display:table-cell">3</button>
    </div>
</div>

<!--[if ie lt 8]>
<script><!--pseudo-code, not real js-->
for (el in getElementsByTagName('button')) {
    if el.style.find('display:table-cell') {
        el.innerHTML = '<td><button>'+el.innerHTML+'</button></td>'
    }
}
</script>
<![endif]-->

<div style="display:table;width:500px;">
    <div style="display:table-row">
        <div style="display:table-cell"> <button style="width:100%">1938274</button> </div>
        <div style="display:table-cell"> <button style="width:100%">2</button> </div>
        <div style="display:table-cell"> <button style="width:100%">3</button> </div>
    </div>
</div>

<style>table button {width:100%}</style>

<table style="width:500px;">
    <tr> <td><button>1938274</button> <td> <button>2</button> <td> <button>3</button> </tr>
</table>

<div id="container">
    <button id="one">One</button><button id="two">Two</button><button id="three">Three</button>
</div>

div#container {
    border: solid 1px;
    width: 200px;
}

div#container button {
    width: 33%;
}

div#container button:last-child {
    width: 34%;
}

div#container {
    border: solid 1px;
    width: 50%; /* resize your browser window to see results */

    position: relative;
}

div#container button {
    position: absolute;
    width: 50px;
}

button#one {
    top: 0;
    left: 0;
}

button#two {
    top: 0;
    left: 55px;
}

button#three {
    width: auto !important; /* get rid of the 50px width defined earlier */
    top: 0;
    left: 110px;
    right: 0px;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>test css button stretch</title>
<style>

#btn_container
{
   width: 200px;
}
#btn_container button
{
   width: 20%;
}
#btn_container button.stretch
{
   width: 58%;
}
</style>
</head>
<body>

<div id="btn_container">
<p>last button stretch...</p>
<button type="button">eat</button>
<button type="button">drink</button>
<button class="stretch" type="button">sleep</button>
<br>
<p>first button stretch...</p>
<button class="stretch" type="button">eat</button>
<button type="button">drink</button>
<button type="button">sleep</button>
<br>
<p>middle button stretch...</p>
<button type="button">eat</button>
<button class="stretch" type="button">drink</button>
<button type="button">sleep</button>
</div>
</body>
</html>