主页 / 问题 / 773844
Accepted
Tihon
Asked:2020-01-22 07:10:31 +0000 UTC2020-01-22 07:10:31 +0000 UTC

为什么`border-collapse:separate`时thead的border-top没有出现在表格中？

  • 772

如果我设置了参数border-collapse: collapse，那么边框是可见的。是什么规范了这种行为？

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>

html

1 个回答

  1. Best Answer

    border-collapse- 设置如何在表格单元格周围显示边框。

    [ collapse] - 单元格之间仅显示一行。

    [ separate] - 每个单元格显示自己的框架，在单元格接触的地方显示两条线。

    由于没有明确设置边框的颜色，当collapse（应该显示一个边框）时，采用默认颜色（黑色），边框显示为table，而不是thead。计入border,和。thead_ tbody_tfoottr

    当在、和中separate被忽略。bordertheadtbodytfoottr

    • 3

相关问题