Почему мой стол не имеет границы между точками?

Я попытался сделать мой стол выглядеть следующим образом: Почему мой стол не имеет границы между точками?

Все выглядит отлично до сих пор, однако, у меня возникли проблемы с моей границы междурядьем, не существует какой-либо по какой-то причине, как показано здесь:

до сих пор у меня есть граница-интервал в моем CSS, однако он ничего не делает, и я не уверен, почему это.

HTML:

<section class="s"> 
    <center> 
     <table class="t"> 
      <caption class="ex2">HTML Table with CSS</caption> 
      <tr> 
       <td class="r1c1">This</td> 
       <td class="r1c2">Little</td> 
       <td class="r1c3">Piggy</td> 
       <td class="r1c4">Went</td> 
       <td class="r1c5">To</td> 
       <td class="r1c6">Market</td> 
      </tr> 

      <tr> 
       <td class="r2c1" colspan="2">This</td> 
       <td class="r2c2">Little</td> 
       <td class="r2c3">Piggy</td> 
       <td class="r2c4">Went</td> 
       <td class="r2c5">To</td> 

      </tr> 

      <tr> 
       <td class="r3c1" colspan="2" rowspan="2">This</td> 
       <td class="r3c2" rowspan="2">Little</td> 
       <td class="r3c3">Piggy</td> 
       <td class="r3c5" rowspan="2">To</td> 
       <td class="r3c6" rowspan="2">Market</td> 
      </tr> 

      <tr> 
       <td class="r3c4">Went</td> 
      </tr> 

      <tr> 
       <td class="r4c1">Little</td> 
       <td class="r4c2">Piggy</td> 
       <td class="r4c4">Went</td> 
       <td class="r4c5">To</td> 
       <td class="r4c5" colspan="2">Market</td> 
      </tr> 
     </table> 
    </center> 
</section>

CSS:

table.t 
{ 
    border: 1px solid; 
    border-spacing: 30px; 
    text-align: center; 
} 

td.r1c1 { border: 1px solid; background-color: #6DFFA8; } 
td.r1c2 { border: 1px solid; background-color: #6DFFCC; } 
td.r1c3 { border: 1px solid; background-color: #6DFFFF; } 
td.r1c4 { border: 1px solid; background-color: #70E8FF; } 
td.r1c5 { border: 1px solid; background-color: #74CEFF; } 
td.r1c6 { border: 1px solid; background-color: #78BAFF; } 

td.r2c1 { border: 1px solid; background-color: #6DFFA8; } 
td.r2c2 { border: 1px solid; background-color: #33FAB4; } 
td.r2c3 { border: 1px solid; background-color: #33F9D8; } 
td.r2c4 { border: 1px solid; background-color: #34F0F9; } 
td.r2c5 { border: 1px solid; background-color: #3CBCF9; } 

td.r3c1 { border: 1px solid; background-color: #6DFFA8; } 
td.r3c2 { border: 1px solid; background-color: #00F9F9; } 
td.r3c3 { border: 1px solid; background-color: #1094FA; } 
td.r3c4 { border: 1px solid; background-color: #1A5EFA; } 
td.r3c5 { border: 1px solid; background-color: #242AFA; } 
td.r3c6 { border: 1px solid; background-color: #511CFA; } 

td.r4c1 { border: 1px solid; background-color: #6DFFA8; } 
td.r4c2 { border: 1px solid; background-color: #00D67B; } 
td.r4c3 { border: 1px solid; background-color: #00CBCB; } 
td.r4c4 { border: 1px solid; background-color: #0E7CD1; } 
td.r4c5 { border: 1px solid; background-color: #1750D4; }

источник

2016-07-12 Asad Mahmood

Для меня это работает? https://jsfiddle.net/f72mrt4v/ Редактировать: Я использую Chrome (последний) – Aer0

Он выглядит так, как вы намереваетесь использовать его в Firefox 47.0.1 - в каком браузере вы используете? – Rounin

@ Aer0 Я понятия не имею, как и почему это так, как показано на картинке. Я не показываю никаких промежутков для меня. :( –

правило таблица отсутствует border-collapse:separate; для border-spacing работать правильно

table.t 
{ 
    border-collapse:separate; 
}

источник

2016-07-12 09:44:08

' border-spacing' является допустимым свойством CSS: https: // developer.mozilla.org/en-US/docs/Web/CSS/border-spacing – blonfu

Все, что мне нужно было добавить, это «border-collapse: seperate;», чтобы исправить эту проблему! –

Рад помочь @AsadMahmood –

Почему мой стол не имеет границы между точками?

ответ

Смежные вопросы