私のウェブページには、半分のボーダーしか持たないテーブルがあります。htmlテーブルの半分のボーダー
例：私が持っている
テーブル：
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データベースからのデータを表示しています。代わりにtdにスタイルを適用する
小さなテーブルのプロパティにパディングをtr
にそれを適用し、削除しよう。あなたのテーブルのCSSに、このCSSを使用します。
table {
border-collapse: separate;
border-spacing: 0 2em;
}
作業は、スニペット：
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>は、トリックを行うことができますtd
tr {
margin: 10px 0;
display: block;
}
これを実践するにはスニペットを設定する必要があります;） –
あなたは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>
ようこそスタックオーバーフロー！コードヘルプを求める質問には、質問自体に** ** [** Stack Snippet **]（https://blog.stackoverflow.com/2014/09/introducing-runnable）で**それを再現するのに必要な最短コードを含める必要があります** -javascript-css-and-html-code-snippets /）。 [**最小限の完全で検証可能なサンプルを作成する方法**]（http://stackoverflow.com/help/mcve） –
パディングの代わりにマージンを使用する – Pete
パディングの代わりに透明なボーダーを追加してみてください。あなたがやったことと失敗した場所を表示するためにスニペットやHTML/CSSコードを設定してください:) –