如何在一列中制作 3 个表格列？

Question

我有以下 3 个表，但正如您所见，列不在一行中，我执行了以下 CSS，但仍然得到相同的输出。那么如何将不同表格的列放在一行中并排列它们呢？

我的 HTML/CSS 代码：

.calculated-value td {
  border: none;
}

div#time-div {
  margin-left: -4%;
  margin-right: -4%;
}

table.calculated-value tr td:first-child {
  border: none;
}

table.calculated-value tbody tr td:first-child h4 {
  font-weight: 300;
  letter-spacing: 3px;
}

table.calculated-value tbody tr td:not(:first-child) {
  font-weight: 600;
}

.calculated-value-title {
  letter-spacing: 5px;
  font-weight: 600 !important;
}

tr#time-row td {
  background-color: #22356d;
  width: 30px !important;
  text-align: left;
}

tr#time-row td:first-child {
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  text-align: center;
}

tr#time-row td:last-child {
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
}

<div class="row">
  <div class="col-md-9 offset-md-1" id="report-tables-container">
    <h4 class="text-center text-white font-weigh-bold calculated-value-title">FAIR MARKET VALUE </h4>
    <table class="table table-center text-white text-center calculated-value">
      <tbody>
        <tr>
          <td>
            <h4>INSTALLED</h4>
          </td>
          <td> 100
            <br>$149,350</td>
          <td> 100%
            <br>$149,350</td>
          <td> 100%
            <br>$149,350</td>

        </tr>
        <tr>
          <td>
            <h4>EXCHANGE</h4>
          </td>
          <td> 100
            <br>$149,350</td>
          <td> 100%
            <br>$149,350</td>

        </tr>
      </tbody>
    </table>
    <div id="time-div">
      <table class="table table-center  text-white text-center text-strong font-weight-bold calculated-value">
        <tbody>
          <tr id="time-row">
            <td>TIME (MONTHS)</td>
            <td> 0</td>
            <td> 12</td>
            <td> 24</td>

          </tr>
        </tbody>
      </table>

    </div>
    <h4 class="text-center text-white font-weight-bold calculated-value-title">LIQUIDATION VALUE</h4>
    <table class="table table-left text-white text-center calculated-value">
      <tbody>

        <tr>
          <td>
            <h4>ORDERLY</h4>
          </td>
          <td> 100
            <br>$149,350</td>
          <td> 100%
            <br>$149,350</td>
        </tr>
        <tr>
          <td>
            <h4>FORCED</h4>
          </td>
          <td> 100
            <br>$149,350</td>
          <td> 100%
            <br>$149,350</td>
          <td> 100%
            <br>$149,350</td>

        </tr>

      </tbody>
    </table>
  </div>
</div>

检查这张照片。

Answer 1

表格不会以任何方式相互连接，也不会自动相互对齐。 CSS 是一种让它们看起来一致的方法。这是近似的方法。

table {
  width: 100%;
}

th {
  text-align: left;
}

td {
  width: 9%;
}

td:first-child {
  width: auto;
}

<table>
    <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
        <th>Age</th>
        <th>Age</th>
        <th>Age</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Very long long long long long name</td>
        <td>Smith</td>
        <td>50</td>
        <td>50</td>
        <td>50</td>
        <td>50</td>
        <td>50</td>
    </tr>
    <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
        <td>94</td>
        <td>94</td>
        <td>94</td>
        <td>94</td>
    </tr>
    <tr>
        <td>John</td>
        <td>Doe</td>
        <td>80</td>
        <td>80</td>
        <td>80</td>
        <td>80</td>
        <td>80</td>
    </tr>
</table>
<table>
    <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
        <th>Age</th>
        <th>Age</th>
        <th>Age</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
        <td>50</td>
        <td>50</td>
        <td>50</td>
        <td>50</td>
    </tr>
    <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
        <td>94</td>
        <td>94</td>
        <td>94</td>
        <td>94</td>
    </tr>
    <tr>
        <td>John</td>
        <td>Doe</td>
        <td>80</td>
        <td>80</td>
        <td>80</td>
        <td>80</td>
        <td>80</td>
    </tr>
</table>
<table>
    <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
        <th>Age</th>
        <th>Age</th>
        <th>Age</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
        <td>50</td>
        <td>50</td>
        <td>50</td>
        <td>50</td>
    </tr>
    <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
        <td>94</td>
        <td>94</td>
        <td>94</td>
        <td>94</td>
    </tr>
    <tr>
        <td>John</td>
        <td>Doe</td>
        <td>80</td>
        <td>80</td>
        <td>80</td>
        <td>80</td>
        <td>80</td>
    </tr>
</table>