如何在多个堆叠表中对齐列？

Question

我正在尝试获得两个表，一个在另一个表的顶部，以对齐它们的列。

第二个表有一个额外的列，但是其余的列与第一个相同。而且我正在尝试使它们具有共同点的列对齐。

我尝试了empty-cells: show;，但是没有用。 如果要在编辑器上运行以下内容，则基本上，我希望在第一张表中跳过“新列”，而在另一列中将“列1”和其余的列对齐。

html {
  font-family: "Helvetica";
  overflow-x: hidden;
}

body {
  margin: 6% 6%;
}

h1 {
  color: #003366;
  font-size: 20x;
  text-align: center;
}

h2 {
  color: #696969;
  font-size: 14px;
  padding: 1.8% 0;
}

p {
  font-size: 12px;
  text-align: justify;
}

table {
  border-collapse: collapse;
  font-size: 10px;
  width: 100%;
  empty-cells: show;
}

.second-table td:not(:first-child):nth-child(odd) {
  background-color: #D3D3D3;
}

th {
  color: #0000CC;
  font-weight: normal;
  text-align: center;
}

tr td:nth-child(1) {
  text-align: left;
}

tr td span {
  margin-right: 2px;
}

td {
  border-top: 1px solid gray;
  border-bottom: 1px solid gray;
  text-align: center;
}

.first-table .first-row {
  background-color: #D3D3D3;
  font-weight: bold;
}

.underweight {
  color: #0000FF;
}

.overweight {
  color: green;
}

.box {
  font-size: 20px;
}

<div class="container">

  <table class="first-table">
    <tr>
      <th></th>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
    </tr>
    <tr class="first-row">
      <td>Label 1</td>
      <td>13%</td>
      <td>25%</td>
      <td>36%</td>
      <td>48%</td>
      <td>57%</td>
    </tr>
    <tr>
      <td>Label 2</td>
      <td>7%</td>
      <td>15%</td>
      <td>24%</td>
      <td>32%</td>
      <td>38%</td>
    </tr>
    <tr>
      <td>Label 3</td>
      <td>68%</td>
      <td>51%</td>
      <td>35%</td>
      <td>18%</td>
      <td>5%</td>
    </tr>
    <tr>
      <td>Label 4</td>
      <td>12%</td>
      <td>9%</td>
      <td>5%</td>
      <td>2%</td>
      <td>0%</td>
    </tr>
    <tr>
      <td>Label 5</td>
      <td>100%</td>
      <td>100%</td>
      <td>100%</td>
      <td>100%</td>
      <td>100%</td>
    </tr>
  </table>

  <h2>Text</h2>

  <table class="second-table">
    <tr>
      <th></th>
      <th>New Column</th>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
    </tr>
    <tr>
      <td><span class="box">&#9632;</span>Communication Services</td>
      <td>10%</td>
      <td><span class="underweight">8%</span></td>
      <td><span class="underweight">9%</span></td>
      <td>10%</td>
      <td><span class="overweight">11%</span></td>
      <td><span class="overweight">12%</span></td>
    </tr>
    <tr>
      <td><span class="box">&#9632;</span>Consumer Discretionary</td>
      <td>10%</td>
      <td><span class="underweight">5%</span></td>
      <td><span class="underweight">6%</span></td>
      <td><span class="underweight">7%</span></td>
      <td><span class="underweight">8%</span></td>
      <td><span class="underweight">9%</span></td>
    </tr>
    <tr>
      <td><span class="box">&#9632;</span>Consumer Staples</td>
      <td>7%</td>
      <td><span class="overweight">15%</span></td>
      <td><span class="overweight">13%</span></td>
      <td><span class="overweight">11%</span></td>
      <td><span class="overweight">9%</span></td>
      <td>7%</td>
    </tr>
    <tr>
      <td><span class="box">&#9632;</span>Energy</td>
      <td>5%</td>
      <td><span class="overweight">9%</span></td>
      <td><span class="overweight">8%</span></td>
      <td><span class="overweight">7%</span></td>
      <td><span class="overweight">6%</span></td>
      <td>5%</td>
    </tr>
    <tr>
      <td><span class="box">&#9632;</span>Financials</td>
      <td>13%</td>
      <td>13%</td>
      <td><span class="overweight">15%</span></td>
      <td><span class="overweight">16%</span></td>
      <td><span class="overweight">17%</span></td>
      <td><span class="overweight">18%</span></td>
    </tr>
    <tr>
      <td><span class="box">&#9632;</span>REITs</td>
      <td>3%</td>
      <td>3%</td>
      <td><span class="overweight">4%</span></td>
      <td><span class="overweight">4%</span></td>
      <td><span class="overweight">4%</span></td>
      <td><span class="overweight">5%</span></td>
    </tr>
    <tr>
      <td><span class="box">&#9632;</span>Health Care</td>
      <td>15%</td>
      <td><span class="overweight">16%</span></td>
      <td><span class="overweight">17%</span></td>
      <td><span class="overweight">17%</span></td>
      <td><span class="overweight">18%</span></td>
      <td><span class="overweight">20%</span></td>
    </tr>
    <tr>
      <td><span class="box">&#9632;</span>Industrials</td>
      <td>9%</td>
      <td><span class="overweight">10%</span></td>
      <td><span class="underweight">8%</span></td>
      <td><span class="underweight">7%</span></td>
      <td><span class="underweight">5%</span></td>
      <td><span class="underweight">4%</span></td>
    </tr>
    <tr>
      <td><span class="box">&#9632;</span>Materials</td>
      <td>3%</td>
      <td><span class="overweight">5%</span></td>
      <td><span class="overweight">4%</span></td>
      <td>3%</td>
      <td><span class="underweight">2%</span></td>
      <td><span class="underweight">0%</span></td>
    </tr>
    <tr>
      <td><span class="box">&#9632;</span>Technology</td>
      <td>21%</td>
      <td><span class="underweight">9%</span<</td>
          <td><span class="underweight">12%</span></td>
      <td><span class="underweight">16%</span></td>
      <td><span class="underweight">18%</span></td>
      <td><span class="underweight">20%</span></td>
    </tr>
    <tr>
      <td><span class="box">&#9632;</span>Utilities</td>
      <td>3%</td>
      <td><span class="overweight">7%</span></td>
      <td><span class="overweight">4%</span></td>
      <td><span class="underweight">2%</span></td>
      <td><span class="underweight">2%</span></td>
      <td><span class="underweight">0%</span></td>
    </tr>
  </table>

Answer 1

出于任何原因，您是否必须使用两个表？如果没有，那么一个表可以像这样工作：

html {
  font-family: "Helvetica";
  overflow-x: hidden;
}

body {
  margin: 6% 6%;
}

h1 {
  color: #003366;
  font-size: 20x;
  text-align: center;
}

h2 {
  color: #696969;
  font-size: 14px;
  padding: 1.8% 0;
}

p {
  font-size: 12px;
  text-align: justify;
}

table {
  border-collapse: collapse;
  font-size: 10px;
  width: 100%;
  empty-cells: show;
}

.second-table td:not(:first-child):nth-child(odd) {
  background-color: #D3D3D3;
}

th {
  color: #0000CC;
  font-weight: normal;
  text-align: center;
}

tr td:nth-child(1) {
  text-align: left;
}

tr td span {
  margin-right: 2px;
}

td {
  border-top: 1px solid gray;
  border-bottom: 1px solid gray;
  text-align: center;
}

.first-table .first-row {
  background-color: #D3D3D3;
  font-weight: bold;
}

.underweight {
  color: #0000FF;
}

.overweight {
  color: green;
}

.box {
  font-size: 20px;
}

<table class="first-table">
    <tr>
      <th></th>
      <th></th>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
    </tr>
    <tr class="first-row">
      <td>Label 1</td>
      <td></td>
      <td>13%</td>
      <td>25%</td>
      <td>36%</td>
      <td>48%</td>
      <td>57%</td>
    </tr>
    <tr>
     <td>Label 2</td>
      <td></td>
      <td>7%</td>
      <td>15%</td>
      <td>24%</td>
      <td>32%</td>
      <td>38%</td>
    </tr>
    <tr>
     <td>Label 3</td>
      <td></td>
      <td>68%</td>
      <td>51%</td>
      <td>35%</td>
      <td>18%</td>
      <td>5%</td>
    </tr>
    <tr>
     <td>Label 4</td>
      <td></td>
      <td>12%</td>
      <td>9%</td>
      <td>5%</td>
      <td>2%</td>
      <td>0%</td>
    </tr>
    <tr>
     <td>Label 5</td>
      <td></td>
      <td>100%</td>
      <td>100%</td>
      <td>100%</td>
      <td>100%</td>
      <td>100%</td>
    </tr>

 <tr style = "border: 0; height: auto;"><td colspan ="7">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
 </td></tr>
 
    <tr>
      <th></th>
      <th>New Col</th>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
    </tr>
    <tr>
      <td><span class="box">&#9632;</span>Communication Services</td>
      <td>10%</td>
      <td><span class="underweight">8%</span></td>
      <td><span class="underweight">9%</span></td>
      <td>10%</td>
      <td><span class="overweight">11%</span></td>
      <td><span class="overweight">12%</span></td>
    </tr>
    <tr>
      <td><span class="box">&#9632;</span>Consumer Discretionary</td>
      <td>10%</td>
      <td><span class="underweight">5%</span></td>
      <td><span class="underweight">6%</span></td>
      <td><span class="underweight">7%</span></td>
      <td><span class="underweight">8%</span></td>
      <td><span class="underweight">9%</span></td>
    </tr>
    <tr>
      <td><span class="box">&#9632;</span>Consumer Staples</td>
      <td>7%</td>
      <td><span class="overweight">15%</span></td>
      <td><span class="overweight">13%</span></td>
      <td><span class="overweight">11%</span></td>
      <td><span class="overweight">9%</span></td>
      <td>7%</td>
    </tr>
    <tr>
      <td><span class="box">&#9632;</span>Energy</td>
      <td>5%</td>
      <td><span class="overweight">9%</span></td>
      <td><span class="overweight">8%</span></td>
      <td><span class="overweight">7%</span></td>
      <td><span class="overweight">6%</span></td>
      <td>5%</td>
    </tr>
    <tr>
      <td><span class="box">&#9632;</span>Financials</td>
      <td>13%</td>
      <td>13%</td>
      <td><span class="overweight">15%</span></td>
      <td><span class="overweight">16%</span></td>
      <td><span class="overweight">17%</span></td>
      <td><span class="overweight">18%</span></td>
    </tr>
    <tr>
      <td><span class="box">&#9632;</span>REITs</td>
      <td>3%</td>
      <td>3%</td>
      <td><span class="overweight">4%</span></td>
      <td><span class="overweight">4%</span></td>
      <td><span class="overweight">4%</span></td>
      <td><span class="overweight">5%</span></td>
    </tr>
    <tr>
      <td><span class="box">&#9632;</span>Health Care</td>
      <td>15%</td>
      <td><span class="overweight">16%</span></td>
      <td><span class="overweight">17%</span></td>
      <td><span class="overweight">17%</span></td>
      <td><span class="overweight">18%</span></td>
      <td><span class="overweight">20%</span></td>
    </tr>
    <tr>
      <td><span class="box">&#9632;</span>Industrials</td>
      <td>9%</td>
      <td><span class="overweight">10%</span></td>
      <td><span class="underweight">8%</span></td>
      <td><span class="underweight">7%</span></td>
      <td><span class="underweight">5%</span></td>
      <td><span class="underweight">4%</span></td>
    </tr>
    <tr>
      <td><span class="box">&#9632;</span>Materials</td>
      <td>3%</td>
      <td><span class="overweight">5%</span></td>
      <td><span class="overweight">4%</span></td>
      <td>3%</td>
      <td><span class="underweight">2%</span></td>
      <td><span class="underweight">0%</span></td>
    </tr>
    <tr>
      <td><span class="box">&#9632;</span>Technology</td>
      <td>21%</td>
      <td><span class="underweight">9%</span<</td>
          <td><span class="underweight">12%</span></td>
      <td><span class="underweight">16%</span></td>
      <td><span class="underweight">18%</span></td>
      <td><span class="underweight">20%</span></td>
    </tr>
    <tr>
      <td><span class="box">&#9632;</span>Utilities</td>
      <td>3%</td>
      <td><span class="overweight">7%</span></td>
      <td><span class="overweight">4%</span></td>
      <td><span class="underweight">2%</span></td>
      <td><span class="underweight">2%</span></td>
      <td><span class="underweight">0%</span></td>
    </tr>
  </table>

Answer 2

我要添加这个：

.first-table tr td:first-child {
  width: 46%;
}

除了硬编码第一张表的第一列的宽度外，我想不出其他任何方式在CSS中轻松地做到这一点。使用JS，表格可以互相引用当前的单元格大小，但是使用纯CSS，我认为不可能将当前动态确定的样式/大小从一个元素复制到另一个元素。

html {
  font-family: "Helvetica";
  overflow-x: hidden;
}

body {
  margin: 6% 6%;
}

h1 {
  color: #003366;
  font-size: 20x;
  text-align: center;
}

h2 {
  color: #696969;
  font-size: 14px;
  padding: 1.8% 0;
}

p {
  font-size: 12px;
  text-align: justify;
}

table {
  border-collapse: collapse;
  font-size: 10px;
  width: 100%;
  empty-cells: show;
}

.second-table td:not(:first-child):nth-child(odd) {
  background-color: #D3D3D3;
}

th {
  color: #0000CC;
  font-weight: normal;
  text-align: center;
}

tr td:nth-child(1) {
  text-align: left;
}

tr td span {
  margin-right: 2px;
}

td {
  border-top: 1px solid gray;
  border-bottom: 1px solid gray;
  text-align: center;
}

.first-table .first-row {
  background-color: #D3D3D3;
  font-weight: bold;
}

.underweight {
  color: #0000FF;
}

.overweight {
  color: green;
}

.box {
  font-size: 20px;
}

.first-table tr td:first-child {
  width: 46%;
}

<div class="container">

  <table class="first-table">
    <tr>
      <th></th>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
    </tr>
    <tr class="first-row">
      <td>Label 1</td>
      <td>13%</td>
      <td>25%</td>
      <td>36%</td>
      <td>48%</td>
      <td>57%</td>
    </tr>
    <tr>
      <td>Label 2</td>
      <td>7%</td>
      <td>15%</td>
      <td>24%</td>
      <td>32%</td>
      <td>38%</td>
    </tr>
    <tr>
      <td>Label 3</td>
      <td>68%</td>
      <td>51%</td>
      <td>35%</td>
      <td>18%</td>
      <td>5%</td>
    </tr>
    <tr>
      <td>Label 4</td>
      <td>12%</td>
      <td>9%</td>
      <td>5%</td>
      <td>2%</td>
      <td>0%</td>
    </tr>
    <tr>
      <td>Label 5</td>
      <td>100%</td>
      <td>100%</td>
      <td>100%</td>
      <td>100%</td>
      <td>100%</td>
    </tr>
  </table>

  <h2>Text</h2>

  <table class="second-table">
    <tr>
      <th></th>
      <th>New Column</th>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
    </tr>
    <tr>
      <td><span class="box">&#9632;</span>Communication Services</td>
      <td>10%</td>
      <td><span class="underweight">8%</span></td>
      <td><span class="underweight">9%</span></td>
      <td>10%</td>
      <td><span class="overweight">11%</span></td>
      <td><span class="overweight">12%</span></td>
    </tr>
    <tr>
      <td><span class="box">&#9632;</span>Consumer Discretionary</td>
      <td>10%</td>
      <td><span class="underweight">5%</span></td>
      <td><span class="underweight">6%</span></td>
      <td><span class="underweight">7%</span></td>
      <td><span class="underweight">8%</span></td>
      <td><span class="underweight">9%</span></td>
    </tr>
    <tr>
      <td><span class="box">&#9632;</span>Consumer Staples</td>
      <td>7%</td>
      <td><span class="overweight">15%</span></td>
      <td><span class="overweight">13%</span></td>
      <td><span class="overweight">11%</span></td>
      <td><span class="overweight">9%</span></td>
      <td>7%</td>
    </tr>
    <tr>
      <td><span class="box">&#9632;</span>Energy</td>
      <td>5%</td>
      <td><span class="overweight">9%</span></td>
      <td><span class="overweight">8%</span></td>
      <td><span class="overweight">7%</span></td>
      <td><span class="overweight">6%</span></td>
      <td>5%</td>
    </tr>
    <tr>
      <td><span class="box">&#9632;</span>Financials</td>
      <td>13%</td>
      <td>13%</td>
      <td><span class="overweight">15%</span></td>
      <td><span class="overweight">16%</span></td>
      <td><span class="overweight">17%</span></td>
      <td><span class="overweight">18%</span></td>
    </tr>
    <tr>
      <td><span class="box">&#9632;</span>REITs</td>
      <td>3%</td>
      <td>3%</td>
      <td><span class="overweight">4%</span></td>
      <td><span class="overweight">4%</span></td>
      <td><span class="overweight">4%</span></td>
      <td><span class="overweight">5%</span></td>
    </tr>
    <tr>
      <td><span class="box">&#9632;</span>Health Care</td>
      <td>15%</td>
      <td><span class="overweight">16%</span></td>
      <td><span class="overweight">17%</span></td>
      <td><span class="overweight">17%</span></td>
      <td><span class="overweight">18%</span></td>
      <td><span class="overweight">20%</span></td>
    </tr>
    <tr>
      <td><span class="box">&#9632;</span>Industrials</td>
      <td>9%</td>
      <td><span class="overweight">10%</span></td>
      <td><span class="underweight">8%</span></td>
      <td><span class="underweight">7%</span></td>
      <td><span class="underweight">5%</span></td>
      <td><span class="underweight">4%</span></td>
    </tr>
    <tr>
      <td><span class="box">&#9632;</span>Materials</td>
      <td>3%</td>
      <td><span class="overweight">5%</span></td>
      <td><span class="overweight">4%</span></td>
      <td>3%</td>
      <td><span class="underweight">2%</span></td>
      <td><span class="underweight">0%</span></td>
    </tr>
    <tr>
      <td><span class="box">&#9632;</span>Technology</td>
      <td>21%</td>
      <td><span class="underweight">9%</span<</td>
          <td><span class="underweight">12%</span></td>
      <td><span class="underweight">16%</span></td>
      <td><span class="underweight">18%</span></td>
      <td><span class="underweight">20%</span></td>
    </tr>
    <tr>
      <td><span class="box">&#9632;</span>Utilities</td>
      <td>3%</td>
      <td><span class="overweight">7%</span></td>
      <td><span class="overweight">4%</span></td>
      <td><span class="underweight">2%</span></td>
      <td><span class="underweight">2%</span></td>
      <td><span class="underweight">0%</span></td>
    </tr>
  </table>