文档建议反馈控制台
首页
学习
活动
专区
工具
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 13:06:53

我想补充一点：

代码语言：javascript
复制
.first-table tr td:first-child {
  width: 46%;
}

除了硬编码第一个表的第一列的宽度之外，我无法想到在CSS中轻松完成任何其他方法。使用JS，表可以引用彼此当前的单元格大小但是使用纯CSS我不认为复制当前动态确定的样式/大小，就像从一个元素到另一个元素一样。

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

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

代码语言：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>
票数 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 归档