围绕水平中心的2列div居中

Question

我从90年代后期开始重新编写页面布局，这是一个表格表。虽然内容是表格，但我试图用div替换仅用于布局目的的表格。但运气不好！

在这个例子中，我有三个表。第一个是单个表，它应该水平居中。下面是两个表格，它们应该以页面的水平中心为中心。

以下是我的尝试：https://jsfiddle.net/mxvdbbjp

表B应该与表C对接（所以没有蓝色背景），表C的标题也应该是表格的全长。

＆＃13;

＆＃13;

.wrapper {
  text-align: center;
}

.L2col {
  margin-left: auto;
  width: 50%;
  box-sizing: border-box;
  background-color: #00f;
  float: left;
}

.R2col {
  width: 50%;
  box-sizing: border-box;
  background-color: #f00;
  float: right;
}

.tab {
  background-color: #0f0;
  border-collapse: collapse;
}

.tab td {
  border: 1px solid #ccc;
}

.block {
  display: inline-block;
  background-color: #f0f;
}

＆＃13;

<div class="wrapper">
  <div class="block">
    <table class="tab">
      <cap>table A</cap>
      <tr>
        <td>some guff here</td>
        <td>test</td>
      </tr>
      <tr>
        <td>test</td>
        <td>test</td>
      </tr>
    </table>
  </div>
  <br>
  <div class="block">
    <div class="L2col">
      <table class="tab">
        <cap>table B</cap>
        <tr>
          <td>test</td>
          <td>test</td>
        </tr>
        <tr>
          <td>test</td>
          <td>test</td>
        </tr>
      </table>
    </div>
    <div class="R2col">
      <table class="tab">
        <cap>table C</cap>
        <tr>
          <td nowrap>big long nonsense text</td>
          <td>test</td>
        </tr>
        <tr>
          <td>test</td>
          <td>test</td>
        </tr>
      </table>
    </div>
  </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

* {
  font-family: arial;
  font-size: 12px;
}

.wrapper {
  text-align: center;
  float: left;
  margin: auto 0px;
  width: 100%;
}

.L2col {
  margin-left: auto;
  box-sizing: border-box;
  float: left;
  width: 50%;
}

.R2col {
  box-sizing: border-box;
  float: right;
  width: 50%;
}

.tab {
  background-color: #0f0;
  /* width: 100%; */
}

.tab td {
  border: 1px solid #ccc;
}

.block-1 {
  display: inline-block;
  background-color: #f0f;
  /* width: 70%; */
  display: inline;
  clear: both;
}

.block-2 {
  display: inline-block;
  background-color: #f0f;
  /* width: 100%; */
}

.tab-2,
.tab-3 {
  table-layout: fixed;
}

tr {
  height: 25px;
  border: none;
}

.tab-1 tr th {
  background-color: #f0f;
}

.tab-2 tr th {
  background-color: #00f;
}

.tab-3 tr th {
  background-color: #f00;
}

tr th,
tr td {
  margin: 0px;
  padding: 0px;
}

<div class="wrapper">
  <div class="block-1">
    <table class="tab tab-1" align="center">
      <tr>
        <th colspan='2'>Table A</th>
      </tr>
      <tr>
        <td>some guff here</td>
        <td>test</td>
      </tr>
      <tr>
        <td>test</td>
        <td>test</td>
      </tr>
    </table>
  </div>
  <div class="block-2">
    <div class="L2col">
      <div>
        <table class="tab tab-2" align="left">
          <tr>
            <th colspan='2'>Table B</th>
          </tr>
          <tr>
            <td>test</td>
            <td>test</td>
          </tr>
          <tr>
            <td>test</td>
            <td>test</td>
          </tr>
        </table>
      </div>

    </div>
    <div class="R2col">
      <div>
        <table class="tab tab-3" align="right">
          <tr>
            <th colspan='2'>Table C</th>
          </tr>
          <tr>
            <td nowrap>big long nonsense text</td>
            <td>test</td>
          </tr>
          <tr>
            <td>test</td>
            <td>test</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>