对齐html表以使两者的垂直线相同

Question

您好我有以下表格，我想要相同的垂直线。请在这里查看我的代码link我有两个垂直表，我希望两个表的垂直对齐线相同，以便两个表之间的线看起来相同但表不同。

这就是我想要的 如果我向添加文本，我将获得以下内容。 请告诉我如何才能让它变得更好。

＆＃13;

＆＃13;

table,
th,
td {
  border: 1px solid black;
}

＆＃13;

<table style="width:100%" cellpadding="10px" cellspacing="1px" padding="20px">
  <tr>
    <th>Month</th>
    <td>Savings</td>
  </tr>
  <tr>
    <th>January</th>
    <td>$100</td>
  </tr>
  <tr>
    <th>February</th>
    <td>$80</td>
  </tr>
</table>

<table style="width:100%">
  <tr>
    <th>Monthasnsandf</th>
    <td>Savings</td>
  </tr>
  <tr>
    <th>Januarydfsadfas</th>
    <td>$100</td>
  </tr>
  <tr>
    <th>Februarydfsadfsafa</th>
    <td>$80</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您只需指定th和td元素的宽度，例如50％。

＆＃13;

＆＃13;

table, th, td {
    border: 1px solid black;
}
table th, table td {
  width: 50%;
}
table th {
  text-align: left;
}

＆＃13;

<table style="width:100%" cellpadding="10px" cellspacing="1px" padding="20px">
  <tr>
    <th>Month</th>
    <td>Savings</td>
  </tr>
  <tr>
    <th>January</th>
    <td >$100</td>
  </tr>
  <tr>
    <th>February</th>
    <td >$80</td>
  </tr>
</table>
<table style="width:100%" cellpadding="10px" cellspacing="1px" padding="20px">
  <tr>
    <th>Monthasnsandf</th>
    <td>Savings</td>
  </tr>
  <tr>
    <th>Januarydfsadfas</th>
    <td >$100</td>
  </tr>
  <tr>
    <th>Februarydfsadfsafa</th>
    <td >$80</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我所做的是将两个表放在另一个表中，该表有2行以完全匹配垂直对齐

table, th, td {
        border: 1px solid black;
    }
  table th, table td {
      width: 50%;
    }

<table>
  <tr>
    <td>

        <table style="width:100%">
          <tr>
            <th>Month</th>
            <td>Savings</td>
          </tr>
          <tr>
            <th>January</th>
            <td >$100</td>
          </tr>
          <tr>
            <th>February</th>
            <td >$80</td>
          </tr>
        </table>
      </td>
    </tr>
  <tr>
    <td>
        <table  style="width:100%">
          <tr>
            <th>Monthasnsandf</th>
            <td>Savings</td>
          </tr>
          <tr>
            <th>Januarydfsadfas</th>
            <td >$100</td>
          </tr>
          <tr>
            <th>Februarydfsadfsafa</th>
            <td >$80</td>
          </tr>
        </table>
      </td>
    </tr>
  </table>

我认为这是你所期待的！