表/ CSS / Div - 2行2列（第2列跨度行）

Question

我想创建一个具有以下格式的表结构：

-----------------------
| Title     | Sidebar |  Total table height a minimum of 500px 
|-----------|         |  Title takes as little space as possible
| Main Text |         |  Main & Sidebar both fill to minimum height.
|           |         |
-----------------------

我有以下jsfiddle可在Chrome / Safari中使用，但IE11将Title和Main分开以具有相同的宽度。这可能在IE中吗？我是否需要使用一些div结构来正确填写它。

html代码

    <div style="background-color: #00f;width:356px; min-height:500px;">
    <table cellspacing="0" cellpadding="0" border="0" >
        <tbody>
            <tr style="height:0%;">
                <td class="title">
                    <div style="background-color: #f0f">Title! - use as little space as possible</div>
                </td>
                <td rowspan=2 class="sidebar">Sidebar content! / should extend to min height and past if needed</td>
            </tr>
            <tr style="height:100%">
                <td class="main"><div class=main style="height:100%;">Main Content! / should fill to match red sidebar b</div></td>
            </tr>
        </tbody>
    </table>
</div>

css代码

table {
  height:500px; /* and not height=500px; */
  width:350px;
  }

.title {
  height:0;
}
td.title {
    vertical-align: text-top;
    background-color:#333;
    border: 1px solid black;
    height: 10px;
    border-spacing: 15px;
}
td.main {
    vertical-align: text-top;
    background-color:#888;
    border: 1px solid black;
    line-height: 100%;
}
td.sidebar {
    vertical-align:top;
    height: 500px;
    background-color: #f00;
    width: 35%;
}

我相信我可以使用css表来做到这一点，但我目前仍然试图修复当前站点而不完全重写存储在mysql数据库中的所有页面。

Answer 1

你只需要设置：

table {
height:500px; /* and not height=500px; */
}
.title {
height:1px;
}

http://jsfiddle.net/4hjbh7z4/8/

div {
  width: 356px;
}
table {
  border-spacing: 0;
  width: 100%;
  table-layout: fixed;/* fix widths */
  height: 500px;
  background-color: #00f;
}
td.title {
  vertical-align: top;
  background-color: #333;
  border: 1px solid black;
  height: 1px;
  background-color: #f0f;
  padding: 15px;/*there was border-spacing here ? */
}
td.main {
  vertical-align: top;
  background-color: #888;
  border: 1px solid black;
}
td.sidebar {
  vertical-align: top;
  background-color: #f00;
  width: 35%;
}

<div>
  <table>
    <tbody>
      <tr>
        <td class="title">Title! - use as little space as possible</td>
        <td rowspan=2 class="sidebar">Sidebar content! / should extend to min height and past if needed</td>
      </tr>
      <tr>
        <td class="main">Main Content! / should fill to match red sidebar b</td>
      </tr>
    </tbody>
  </table>
</div>