文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何在多个堆叠表中对齐列？

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

Stack Overflow用户
提问于 2019-06-04 04:40:14
回答 2查看 0关注 0票数 0

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

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

我试过empty-cells: show;但是没用。如果您在编辑器上运行以下内容，基本上我希望在第一个表中跳过“新列”，并将“列1”和其余部分在一列中对齐。

代码语言：javascript
复制
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;
}

代码语言：javascript
复制
<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>
EN

Stack Overflow用户

发布于 2019-06-04 14:36:34

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

代码语言：javascript
复制
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;
}

代码语言：javascript
复制
<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>
票数 0
EN
查看全部 2 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/-100009072

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档