<dl>
  <dt>表格两列布局，左边分类右边内容，一列固定宽度，一列自适应宽度，高度自动平行</dt>
  <dd class="box-1">
    <table>
      <tr>
        <td class="left">分类列表区域</td>
        <td class="right">主要内容区域<p>这是p标签的内容</p></td>
      </tr>
    </table>
  </dd>
  <dt>表格两列布局，左边内容右边分类，一列固定宽度，一列自适应宽度，高度自动平行</dt>
  <dd class="box-1">
    <table>
      <tr>
        <td class="right">右边主要内容区域<p>这是p标签的内容</p></td>
        <td class="left">左边列表区域</td>
      </tr>
    </table>
  </dd>
  <dt>表格两列布局，左边内容右边分类，按照宽度的百分比自适应</dt>
  <dd class="box-3">
    <table>
      <tr>
        <td class="left">左边列表区域</td>
        <td class="right">右边主要内容区域<p>这是p标签的内容</p></td>
      </tr>
    </table>
  </dd>
</dl>

dl{
  padding: 0;
  margin: 10px;
  dt{
    margin-top: 10px;
    font-size: 20px;
    color: #fff;
    background-color: #00c;
    height: 50px;
    line-height: 50px;
    padding: 0 10px;
  }
  dd{
    border: 1px solid #ccc;
    margin: 0;
    height: 300px;
    table{
      width: 100%;
      height: 100%;
      border-collapse: collapse;
      border-spacing:0;
      td{
        vertical-align: top;
        padding: 20px;
      }
    }
  }
  .left{background-color: pink;}
  .right{background-color: skyblue;}
}
.box-1{
  .left{
    width: 200px;
  }
}
.box-3{
  .left{
    width: 20%;
  }
  .right{
    width: 80%;
  }
}