html - 固定大小的单元格被另外两个带边框的单元格包围

Question

我需要创建一个具有以下特征的表：

__ _ __ _ __ 100% 的窗口宽度_ __ _ __ _ _

| 自动宽度 | 860 像素宽度，边框 | 自动宽度，边框

---

换句话说：一个 860 像素的居中单元格，每侧被一个其他单元格包围。右侧单元格还必须设置边框。

我想不出对所有（甚至是旧的 IE6）浏览器都友好的东西。兼容性对我来说很重要。我真的不在乎它是桌子还是一堆div。你有什么想法？

谢谢

Answer 1

很抱歉这个非常古怪的标记，但它看起来像你所描述的那样：

编辑：添加表格布局：为表格固定，为中央 td 添加宽度 =“860”：

<style type="text/css">
table{ table-layout: fixed; }
.w860{ width:858px; }
.brdr{ border-style:dashed; border-width:1px; }
.td860{ background-color:#eee; }
</style>

<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
    <td><div></div></td>
    <td width="860" class="td860">
        <div class="w860 brdr">
            content
        </div>
    </td>
    <td>
        <div class="brdr"> also some content</div>
    </td>
</tr>
</table>

在 FF、IE6+（quirksmode 和标准）、Safari for windows 中测试。

Answer 2

<style>
table{
width:100%;
}
 .auto{
width:auto;
}
.fixed{
width:860px;
}
.bordered{
border: 1px #ff0000 dashed;
}
</style>

<table>
<tr>
<td class="auto">11&nbsp;</td>
<td class="fixed">111&nbsp;</td>
<td class="auto bordered">111&nbsp;</td>
</tr>
</table>