我正在使用以下 HTML 和 CSS(在 CodePen 上查看):
<table id="responseTable" style="margin-top:10px;" >
<tbody>
<tr>
<td><div></div></td>
<td><div class="emptyCell"></div></td>
<td><div class="emptyCell"></div></td>
<td><div class="emptyCell"></div></td>
</tr>
<tr>
<td>5 Min.</td>
<td class="third">14</td>
<td class="third">3</td>
<td class="third">12</td>
</tr>
<tr>
<td>15 Min.</td>
<td class="second">2</td>
<td class="second">12</td>
<td class="second">12</td>
</tr>
<tr>
<td>< 1 Std.</td>
<td class="first">2</td>
<td class="first">5</td>
<td class="first">12</td>
</tr>
<tr id="labelRow">
<td> </td>
<td>Total</td>
<td>AD</td>
<td>VKF</td>
</tr>
</tbody>
<tfoot>
<tr id="testsRow">
<td style="border-top: 2px solid black;">tests</td>
<td style="border-top: 2px solid black;">5</td>
<td style="border-top: 2px solid black;">12</td>
<td style="border-top: 2px solid black;">12</td>
</tr>
</tfoot>
</table>
body, html {
width:100%;
height:100%;
margin:0;
padding:0;
font-family:arial;
}
#responseTable {
border-collapse:separate;
border-spacing: 20px 0px;
}
th, td {
padding: 0;
}
td{
text-align:center;
}
tr{
height:50px;
}
.emptyCell
{
height:50px;
border-radius: 10%;
border-top: gray dashed 2px;
border-left: gray dashed 2px;
border-right: gray dashed 2px;
border-bottom: gray dashed 2px;
/* margin-bottom:-5px; */
background-Color:white;
}
tr td:nth-of-type(1) {
width:50px;
}
tr td:nth-of-type(2)
{
margin-left:20px;
width:100px;
}
tr td:nth-of-type(1)
{
width:100px;
}
tr td:nth-of-type(1) ~ td
{
color:white;
border-bottom:white solid 1px;
}
tr td:nth-of-type(2) ~ td
{
width:40px;
}
#testsRow td{
background-color:#99cc66;
color:#000;
}
#labelRow td{
background-color:white;
color:#000;
}
.first {
background-color: #91B219;
}
.second {
background-color: #1F8A70;
}
.third {
background-color: #004358;
}
...在表格单元格上设置上边框。但是由于我使用的 border-spacing
会导致单元格之间出现间隙,因此顶部边框不适用于“间隙”,因此我无法在 #testsRow 中的单元格上创建摘要行
。
我也考虑过标签 tfoot
是否有帮助,但垂直边框空间仍然存在......
我还考虑过在一个额外的表格中制作摘要页脚,这样当我使用虚拟间隙/空列时,它们只为一行而不是所有行创建,当我将这些列用于顶部图表时。
或者是否可以只在 tbody
而不是 tfoot
上使用 border-spacing,因为我至少只有一个表。
或者你有更好的主意?
最佳答案
我我 无法在此处发布 html 代码。顺便说一句,我已经编辑了 fiddle 。这次甚至 fork 它以避免像以前那样覆盖。
HTML
<table id="responseTable" style="margin-top:10px;" >
<tbody>
<tr>
<td><div></div></td>
<td><div class="emptyCell"></div></td>
<td><div class="emptyCell"></div></td>
<td><div class="emptyCell"></div></td>
</tr>
<tr>
<td>5 Min.</td>
<td class="third">14</td>
<td class="third">3</td>
<td class="third">12</td>
</tr>
<tr>
<td>15 Min.</td>
<td class="second">2</td>
<td class="second">12</td>
<td class="second">12</td>
</tr>
<tr>
<td>< 1 Std.</td>
<td class="first">2</td>
<td class="first">5</td>
<td class="first">12</td>
</tr>
<tr id="labelRow">
<td> </td>
<td>Total</td>
<td>AD</td>
<td>VKF</td>
</tr>
</tbody>
<tfoot style="border-collapse:inherit;">
<tr class="testsRowBorder" style="height:0;">
<td colspan="4" style="border-bottom: 2px solid black;">
</td>
<tr>
<td>tests</td>
<td style="color:black;">44</td>
<td style="color:black;">55</td>
<td style="color:black;">33</td>
</tr>
</tr>
CSS
body, html{
width:100%;
height:100%;
margin:0;
padding:0;
font-family:arial;
}
#responseTable {
border-collapse:separate;
border-spacing: 20px 0px;
}
th, td {
padding: 0;
}
td{
text-align:center;
}
tr{
height:50px;
}
.emptyCell
{
height:50px;
border-radius: 10%;
border-top: gray dashed 2px;
border-left: gray dashed 2px;
border-right: gray dashed 2px;
border-bottom: gray dashed 2px;
/* margin-bottom:-5px; */
background-Color:white;
}
tr td:nth-of-type(1) {
width:50px;
}
tr td:nth-of-type(2)
{
margin-left:20px;
width:100px;
}
tr td:nth-of-type(1)
{
width:100px;
}
tr td:nth-of-type(1) ~ td
{
color:white;
border-bottom:white solid 1px;
}
tr td:nth-of-type(2) ~ td
{
width:40px;
}
#testsRow td{
background-color:#99cc66;
color:#000;
}
#labelRow td{
background-color:white;
color:#000;
}
.first {
background-color: #91B219;
}
.second {
background-color: #1F8A70;
}
.third {
background-color: #004358;
}
关于html - 在带有 border-space 的表格上放置一个 css 边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17165654/