我的网页中有一个表格,我希望它只有半边框。
例子:
我的 table :
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 数据库中的数据。
最佳答案
您可以在 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>
此外,您还可以使用透明边框和阴影在 table 上或 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>
关于html - html表格的半边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43935004/