html表格的半边框答案

【问题标题】：Half border for html tablehtml表格的半边框
【发布时间】：2017-10-11 14:42:08
【问题描述】：

我的网页中有一个表格，我只想有一半边框。

例子：

我的桌子：

A | B | C
  |   |
A | B | C
  |   |
A | B | C

注意：

td { padding-bottom: 5%; }
td#B { border-left: 1px solid black; border-right: 1px solid black}
/* Assuming alphabets A , B and C are ids of each td */

我想要的桌子：

A | B | C

A | B | C

A | B | C

我怎样才能做到这一点？

我正在使用 angularjs'ng-repeat 来显示来自表的 json 数据库的数据。

【问题讨论】：

欢迎来到 Stack Overflow！寻求代码帮助的问题必须包括在问题本身最好是在Stack Snippet 中重现它所需的最短代码。见How to create a Minimal, Complete, and Verifiable example
使用边距而不是内边距
而不是填充，尝试添加透明边框，如果这不起作用，请在您的问题中设置一个 sn-p 或 HTML/CSS 代码以显示您做了什么以及您失败的地方:)

标签： html css angularjs html-table border

【解决方案1】：

不要将样式应用于td，而是尝试将其应用于tr
并删除td上的填充

tr {
  margin: 10px 0;
  display: block;
}

【讨论】：

【解决方案2】：

一个小的表属性可以解决问题。在你的表格 css 中使用这个 css：

table {
  border-collapse: separate;
  border-spacing: 0 2em;
}

工作sn-p：

table {
  border-collapse: separate;
  border-spacing: 0 2em;
}

td {
  border-right: 1px solid #000;
  padding: 0 10px;
}

tr td:last-child {
  border-right: 0px solid #000;
}

<table>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
  </tr>




</table>

【讨论】：

【解决方案3】：

您可以在 tr 或 border-spacing 上使用额外的边框。

将边框或背景应用于表格时可以看到差异：

table {
/* demo purpose mainly */
  float:left;
  margin:1em;
  background:lightgray;
  box-shadow: 0 0 0 2px green;;
}
.bdtr {  
border-collapse:collapse;
}
td {padding:0 1em;}
td + td {
  border-left:1px solid;
}
.bdtr tr + tr{
  border-top:1em lightgray solid; /* use background-color */
}
 
.bdtd {
  border-spacing:0 1em;
  margin:0 1em;
}

<table class="bdtr">
<caption>border on tr</caption>
  <tr>
    <td>A</td><td>B</td><td>C</td>
  </tr>
  <tr>
    <td>A</td><td>B</td><td>C</td>
  </tr>
  <tr>
    <td>A</td><td>B</td><td>C</td>
  </tr>
</table>
<table class="bdtd">
<caption> border-spacing</caption>
  <tr>
    <td>A</td><td>B</td><td>C</td>
  </tr>
  <tr>
    <td>A</td><td>B</td><td>C</td>
  </tr>
  <tr>
    <td>A</td><td>B</td><td>C</td>
  </tr>
</table>

此外，您可以使用透明边框和阴影来允许在桌子上或桌子后面使用非纯色背景：

.bdtr {
  border-collapse: collapse;
}

td {
  padding: 0 1em;
}

.bdtr.bis {
  background: linear-gradient(60deg, gray, yellow, purple, pink, lime);
}

.bdtr.bis tr+tr {
  border-top: 1em transparent solid;
}

.bdtr.bis tr td+td {
  border: none;/* reset from previous demo */
  box-shadow: inset 2px 0;
}

<table class="bdtr bis">
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
  </tr>
</table>

【讨论】：