html – THEAD TBODY和COLSPAN的CSS边界问题

概述我有一个css / html表的问题： 当我使用带有colspan属性的thead和tbody标签时,标题的下边框被分开. 间隙大小取决于边界宽度. 您是否有解决方案在标题底部获得连续边框(不删除thead和tbody)？ JSFiddle example table { border-collapse: collapse;}th { border: 4px solid red; 我有一个CSS / HTML表的问题：
当我使用带有colspan属性的thead和tbody标签时,标题的下边框被分开.
间隙大小取决于边界宽度.

您是否有解决方案在标题底部获得连续边框(不删除thead和tbody)？

JSFiddle example

table {  border-collapse: collapse;}th {  border: 4px solID red;  border-bottom: 4px solID black}td {  border: 4px solID blue;}thead tr {  border-bottom: 5px solID green}

table {  border-collapse: collapse;}th {  border: 4px solID red;  border-bottom: 4px solID black}td {  border: 4px solID blue;}thead tr {  border-bottom: 5px solID green}

with Thead and tbody but without ColSPAN<table>  <thead>    <tr>      <th>        Column 1      </th>      <th>        Column 2      </th>    </tr>  </thead>  <tbody>    <tr>      <td>        Content 1      </td>      <td>        Content 2      </td>    </tr>  </tbody></table><br /> ColSPAN with Thead and tbody <span >(CSS BUG in the mIDdle of green border ?)</span><table>  <thead>    <tr>      <th>        Column 1      </th>      <th>        Column 2      </th>    </tr>  </thead>  <tbody>    <tr>      <td colspan="2">        Content 1 and 2 (merged cells)      </td>    </tr>  </tbody></table><br /> ColSPAN without Thead and tbody<table>  <tr>    <th>      Column 1    </th>    <th>      Column 2    </th>  </tr>  <tr>    <td colspan="2">      Content 1 and 2 (merged cells)    </td>  </tr></table>

解决方法 折叠边框之间的角落渲染似乎没有明确指定,因此不清楚这实际上是一个错误,而不仅仅是行为的变化.

我确实找到了一个可怕的firefox解决方法,在thead中创建一个伪第二行,然后隐藏它,并隐藏第一个tbody行的顶部边框,如下所示：

thead:after {    content:'';    display:table-row;  /* see note below */    position:absolute;    visibility:hIDden;}tbody tr:first-child td {    border-top-wIDth:0;}

(请注意,display：table-row仅用于show.实际上,position：absolute会导致伪元素显示：block,无论display属性是设置为table-row还是保留为默认内联.然后容器的表布局将该块包装在table-row和table-cell的匿名表对象中,以形成结构良好的表.)

table {  border-collapse: collapse;}th {  border: 4px solID red;  border-bottom: 4px solID black}td {  border: 4px solID blue;}thead tr {  border-bottom: 5px solID green}table ~ table thead:after {    content:'';    position:absolute;    visibility:hIDden;}table ~ table tbody tr:first-child td {    border-top-wIDth:0;}

with Thead and tbody but without ColSPAN<table>  <thead>    <tr>      <th>        Column 1      </th>      <th>        Column 2      </th>    </tr>  </thead>  <tbody>    <tr>      <td>        Content 1      </td>      <td>        Content 2      </td>    </tr>  </tbody></table><br /> ColSPAN with Thead and tbody <span >(CSS BUG in the mIDdle of green border ?)</span><table>  <thead>    <tr>      <th>        Column 1      </th>      <th>        Column 2      </th>    </tr>  </thead>  <tbody>    <tr>      <td colspan="2">        Content 1 and 2 (merged cells)      </td>    </tr>  </tbody></table><br /> ColSPAN without Thead and tbody<table>  <tr>    <th>      Column 1    </th>    <th>      Column 2    </th>  </tr>  <tr>    <td colspan="2">      Content 1 and 2 (merged cells)    </td>  </tr></table>

总结

以上是内存溢出为你收集整理的html – THEAD TBODY和COLSPAN的CSS边界问题全部内容，希望文章能够帮你解决html – THEAD TBODY和COLSPAN的CSS边界问题所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。