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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (8)

我正在尝试获得两个表,一个在另一个之上,以对齐它们的列。

第二个表有一个额外的列,但其余列与第一个列相同。我正试图让他们共同对齐的列。

我试过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>
提问于
用户回答回答于

你出于任何原因必须使用两张桌子吗?如果没有,一个表可以像这样工作:

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>
用户回答回答于

我想补充一点:

.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>

扫码关注云+社区

领取腾讯云代金券