我正在尝试获得两个表,一个在另一个之上,以对齐它们的列。
第二个表有一个额外的列,但其余列与第一个列相同。我正试图让他们共同对齐的列。
我试过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">■</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">■</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">■</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">■</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">■</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">■</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">■</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">■</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">■</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">■</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">■</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>
发布于 2019-06-04 13:06:53
我想补充一点:
.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">■</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">■</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">■</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">■</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">■</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">■</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">■</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">■</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">■</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">■</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">■</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>
https://stackoverflow.com/questions/-100009072
复制相似问题