html – 由于Chrome中的colspan,无法删除边框

概述考虑以下代码 table { border-collapse: collapse;}td { border: 1px solid red;}td.nb { border: 0 !important;} <table> <tr> <td class="nb" colspan="3">Foo</td> </tr> <tr> <td>Hello</t 考虑以下代码

table {  border-collapse: collapse;}td {  border: 1px solID red;}td.nb {  border: 0 !important;}

<table>  <tr>    <td  colspan="3">Foo</td>  </tr>  <tr>    <td>Hello</td>    <td>World</td>    <td >bar</td>  </tr>  <tr>    <td  colspan="3">Foo</td>  </tr></table>

我希望列“bar”没有边框,但出于某种原因带边框(顶部底部)

如何删除边框？

Codepen：https://codepen.io/anon/pen/rwLQWG

解决方法 这是一个 known Chrome issue,而且非常烦人.

April 1 2014

It’s a kNown (old) issue in our table code. Collapsing borders are determined based on adjacent cells and our code doesn’t deal correctly with spanning cells (we only consIDer the cell adjoining the first row / column in a row / column span). On top of that,our border granularity is determined by the cell’s span.

To fix this BUG,we would need to overhaul our collapsing border code,which is a big undertaking.

(归功于Paolo Forgia的备用answer,这是第一个注意到Chromium线程的.)

分离边界是一种选择,但我知道我个人讨厌使用分离的细胞边界.你遇到的问题是,每个其他单元格只需要在一个站点上有一个边框,这就变得非常头疼,更不用说CSS标记的卷积了.

使您能够保持可折叠边框的解决方法类似于下面的方法.它在单元格中创建一个伪元素,用白色覆盖红色边框.

body {    background: white;}table {  border-collapse: collapse;}td {  border: 1px solID red;  }td.nb {  border: 0 !important;}/* New class for cells affected by this issue */td.nbtb {  position: relative;  border: 0 !important;}/* Pseudo-element to cover up the borders */td.nbtb::after {  position: absolute;  top: 0px;  left: 0px;  display: block;  content: '';  wIDth: 100%;  height: calc(100% + 1px);  border: 1px solID white;  Box-sizing: border-Box;}

<table>  <tr>    <td  colspan="3">Foo</td>  </tr>  <tr>    <td>Hello</td>    <td>World</td>    <td >bar</td>  </tr>  <tr>    <td  colspan="3">Foo</td>  </tr></table>

总结

以上是内存溢出为你收集整理的html – 由于Chrome中的colspan,无法删除边框全部内容，希望文章能够帮你解决html – 由于Chrome中的colspan,无法删除边框所遇到的程序开发问题。

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