Положите границу Css на столе с границами пространства

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, может ли он помочь, но все же вертикальная граница пространства остается ...

Я также считал, что делает краткий колонтитул в дополнительной таблице, таким образом, когда я использую манекен gap/empty, они создаются только для ОДНОЙ строки, а не для всех строк, когда я буду использовать такие столбцы для таблицы верхней диаграммы.

Возможно ли использовать интервал между границами только на tbody, а не на tfoot, чем у меня был бы хотя бы один стол.

Или у вас есть идея?

Answer 1

Я был я не может разместить 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