html - 如何对齐多个堆叠表中的列？

标签 html css

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

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

我尝试了 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>

关于html - 如何对齐多个堆叠表中的列？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56432502/

上一篇：html - 位置 "sticky"在 ReactJS 应用程序中不起作用，并且父级中没有指定 "overflow"属性

下一篇：html - 居中背景 :url image with :after pseudo element in CSS

相关文章：

html - 我想知道当我将鼠标悬停在另一张图片上时如何让一张图片出现

html - CKEditor Paste From Word 问题与表格的背景颜色

html - 删除 ionic 中 ionic 列表元素的焦点线

javascript - 始终在特定的 div 上滚动

javascript - 在提交时传递主键而不是属性

html - 字体在 HTML 页面中显示不正确

php - 通过 ajax post 将 div Html 和 Css 保存在数据库中。

javascript - 获取使用 chrome 扩展创建的弹出窗口的 DOM 访问权限

javascript - 使用表单运行 javascript 方法

html - 垂直 div float 在页面左侧中间

©2024 IT工具网  联系我们