不同的边框间距不同行

Question

简介：我需要显示的表像下面这样：

用品：

• 语义HTML编码
• 没有脚本

HTML：

<table> 
<thead> 
    <tr> 
     <th colspan=2> 
      One 
     </th> 
     <th colspan=2> 
      Two 
     </th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
     <td> 
      One 
     </td> 
     <td> 
      Two 
     </td> 
     <td> 
      Three 
     </td> 
     <td> 
      Four 
     </td> 
    </tr> 
    <tr> 
     <td> 
      One 
     </td> 
     <td> 
      Two 
     </td> 
     <td> 
      Three 
     </td> 
     <td> 
      Four 
     </td> 
    </tr> 
<tbody> 
</table> 

---

第一次尝试：

“边界崩溃属性”

我对thead试图border-collapse: separate;和border-collapse: collapse;上tbody但SIMP没有工作。

table { 
    border-collapse: collapse; 
    border-spacing: 1em; 
} 

table thead { 
    border-collapse: separate; 
} 

table tbody tr { 
    border-bottom: 1px solid black; 
} 

table thead tr th{ 
    border-bottom: 1px solid black; 
    padding: 10px; 
    text-align: center; 
} 

table tbody tr td { 
    border-bottom: 1px solid black; 
    padding: 10px; 
}​ 

On JSFIDDLE

---

第二次尝试：

“添加空白单元格”

我可以在HTML中添加空白单元格拿到表的首选外观码。但是这种方法缺乏语义结构。

table { 
    border-collapse: collapse; 
    border-spacing: 1em; 
} 

table tbody tr { 
    border-bottom: 1px solid black; 
} 

table thead tr th[colspan="2"]{ 
    border-bottom: 1px solid black; 
    padding: 10px; 
    text-align: center; 
} 

table tbody tr td { 
    border-bottom: 1px solid black; 
    padding: 10px; 
}​ 

On JSFIDDLE

---

其他各种attemps

我也试过在头边框-webkit-border-image: -webkit-linear-gradient(left, black 95%, white 5%);，但不能设法得到它的工作。

---

毕竟我接受新的建议。

注： 这将是一个电子书文件。所以一般背景颜色在不同的阅读器应用中可能有所不同

Answer 1

根据您的兼容性要求，您必须使用CSS生成内容的选项：

th { 
    /* other CSS */ 
    position: relative; 
} 

thead th::before, 
thead th::after { 
    content: ''; 
    position: absolute; 
    bottom: -1px; 
    width: 0.5em; 
    border-bottom: 1px solid #fff; 
} 

thead th::before { 
    left: 0; 
} 

thead th::after { 
    right: 0; 
} 

JS Fiddle demo。

为了简单起见，我已经给都th元素相同::before和::after，但如果总是只有两个th元素的选择可以改变：

th { 
    /* other CSS */ 
    position: relative; 
} 

thead th:first-child::after, 
thead th:last-child::before { 
    content: ''; 
    position: absolute; 
    bottom: -1px; 
    width: 0.5em; 
    border-bottom: 1px solid #fff; 
} 

thead th:last-child::before { 
    left: 0; 
} 

thead th:first-child::after { 
    right: 0; 
} 

JS Fiddle demo。

Answer 2

Here's my try。

基本上我只是做：

table thead tr th[colspan="2"]:first-child { 
    border-right: 20px solid white; 
} 
table thead tr th[colspan="2"]:nth-child(2) { 
    border-left: 20px solid white; 
} 

注：我个人不会用这样复杂的选择，但是这应该给你的想法。

Answer 3

您可以通过添加白色边框来做到这一点。然后您需要从第一个和最后一个单元格关闭它们。

table thead tr th{ 
    border-left: solid 10px white; 
    border-right: solid 10px white; 
    border-bottom: 1px solid black; 
    padding: 10px; 
    text-align: center; 
} 
table thead tr th:first-child { 
    border-left: none; 
} 
table thead tr th:last-child { 
    border-right: none; 
} 

这里的时候可以垫`th`元素，而不是更新的爵士小提琴http://jsfiddle.net/davetayls/Tw5Vb/9/