html - 无表或不无表 : Html expanding box with custom corners

Question

我在使用 DIV 为我的网站设置内容框样式时遇到了问题。它基本上看起来像这样:

          container+--------------------------+|+--+------------------+--+|||c1|        r1        |c2|||+--+------------------+--+|||  |                  |  ||||  |                  |  ||||r4|     content      |r2||||  |                  |  ||||  |                  |  |||+--+------------------+--+|||c4|        r3        |c3|||+--+------------------+--+|+--------------------------+

The width/height of r1,r2,r3 and r4 are unknown. They all have a 1px (tall or wide) gradient which repeats itself over the background.

The corners have 5x5px pngs (rounded, with transparant background).

The problem is that I do not know width or height of the content, and thus not of the r1 through r4's. There isn't really a way of saying in css:

r1 {width: container.width - 2x5px};

我知道这可以用 javascript 完成，但我想避免这种情况。

在这种情况下使用表格不是更容易吗？它对我来说确实像一张 table :)

Answer 1

在我看来也像一张 table 。我确定我会被贴上异教徒的烙印，但有时使用表格比使用 css 更容易。

    <table>
        <tr>
            <td id=container>
             <table>
                <tr>
                  <td id=c1></td>
                  <td id=r1></td>
                  <td id=c2></td>
                </tr>
                <tr>
                  <td id=r4></td>
                  <td id=content></td>
                  <td id=r2></td>
                </tr>
                <tr>
                  <td id=c4></td>
                  <td id=r3></td>
                  <td id=c3></td>
                </tr>
            </table>
            </td>
        </tr>
    </table>