If I set the border-collapse: collapse parameter, then the border is visible. What governs this behavior?

 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>

Otherwise:

 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>

    1 answer 1

    border-collapse - sets how to display borders around table cells.

    [ collapse ] - only one line between cells is displayed.

    [ separate ] - around each cell displays its own frame, two lines are shown at the contact points of the cells at once.

    Since the border color is not explicitly set, then during the collapse (one border should be displayed) the default color (black) is taken and the border is displayed in the table , and not in thead . It thead border in thead , tbody , tfoot and tr .

    When separate , the border in thead , tbody , tfoot and tr tfoot .