Question

我正在使用以下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>&lt; 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上使用边框间距，而不是至少只有一个表格。

或者你有更好的主意？

example image of the how the code looks

Answer 1

我 am 无法在此处发布html代码。我顺便编辑了小提琴。这次甚至分叉，以避免像以前一样覆盖。

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>&lt; 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;
}

http://codepen.io/tornados/pen/AxBrh

将css边框放在带边框空间的桌子上

1 个答案: