Почему в таблице при `border-collapse: separate` не отображается border-top у thead?

238

23 января 2018, 10:02

Если я ставлю параметр border-collapse: collapse, то border - видно. Чем регулируется это поведение?

table {  
  width: 100%; 
  border-collapse: collapse; 
} 
thead { 
 border-top: solid 1px; 
}

 <table> 
   <thead> 
     <tr>  
      <th>&nbsp;</th><th>2013</th> 
      <th>2014</th><th>2015</th> 
     </tr> 
   </thead> 
   <tbody> 
     <tr>  
      <td>Нефть</td><td>43</td> 
      <td>51</td><td>79</td> 
     </tr> 
     <tr>  
      <td>Золото</td><td>29</td> 
      <td>34</td><td>48</td> 
     </tr> 
     <tr>  
      <td>Дерево</td><td>38</td> 
      <td>57</td><td>36</td> 
     </tr> 
   </tbody> 
  </table>

Иначе:

table { width: 100%; border-collapse: separate; } 
thead { border-top: solid 1px; }

<table> 
   <thead> 
     <tr>  
      <th>&nbsp;</th><th>2013</th> 
      <th>2014</th><th>2015</th> 
     </tr> 
   </thead> 
   <tbody> 
     <tr>  
      <td>Нефть</td><td>43</td> 
      <td>51</td><td>79</td> 
     </tr> 
     <tr>  
      <td>Золото</td><td>29</td> 
      <td>34</td><td>48</td> 
     </tr> 
     <tr>  
      <td>Дерево</td><td>38</td> 
      <td>57</td><td>36</td> 
     </tr> 
   </tbody> 
  </table>

Answer 1

border-collapse - устанавливает, как отображать границы вокруг ячеек таблицы.

[collapse] - линия между ячейками отображается только одна.

[separate] - вокруг каждой ячейки отображается своя собственная рамка, в местах соприкосновения ячеек показываются сразу две линии.

Так как явно не задан цвет границы, то при collapse(должна отобразиться одна граница) взят цвет по умолчанию (black) и отображается граница в table, а не в thead. Учитывается border в thead, tbody, tfoot и tr.

При separate игнорируются border в thead, tbody, tfoot и tr.