html - ヘッダーには流動的な背景画像があり、中央には背景がありません

Question

width:100% で、1 列目と 3 列目に背景画像がある 3 列のヘッダーが必要です。

このソリューションは、ブラウザ間の互換性が必要です。

• 最初の列は背景画像で、幅は 50% です (キャプションの幅は含みません)。
• 2 列目はキャプションです。これには背景がありません (透明)。幅は内容より大きくしてはいけません。
• 3 列目は 1 列目と同じです。

テーブルを使用すると、これには 2 秒かかります: http://jsfiddle.net/aLeyS/

<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td></td>
        <td>Caption</td>
        <td></td>
    </tr>

table {
    width: 100%;
}
table td:first-child, table td:last-child {
    width: 50%;
    background-image: url(http://fc01.deviantart.net/fs16/i/2007/132/9/4/BW_Striped_Background_Texture_by_Enchantedgal_Stock.jpg);
}
table td:nth-child(2) {
    padding: 0 10px;
    font-size: 30px;
}

テーブルがなければ、これはもっとトリッキーに思えます。

親 div 内の DIV で設定されたパーセンテージ幅を使用しようとしましたが、常に中央の列に必要以上の幅を与えるか、パーセンテージが不十分な場合はキャプションを強制的に折り返すことになります。

繰り返しますが、中央の列 (キャプション) の幅はそのコンテンツより大きくしてはならず、背景は透明 (白ではなく) である必要があります。