web-dev-qa-db-ja.com

垂直線のみが表示されたテーブル

テーブルに縦線のみを表示する方法が必要です。

表と個別のtdの両方に、1：1の固体#red;を使用して、border-leftとborder-rightを追加しようとしました。ただし、境界線の色は追加されません。

したがって、私が探しているのは、これらの垂直線を簡単に作成する方法です。

html5css3css-tables
18
Michael Tot Korsgaard

<table>でborder-leftおよびborder-rightよりも<td>でborder-collapseを使用します。

table { border-collapse: collapse; }
tr { border: none; }
td {
  border-right: solid 1px #f00; 
  border-left: solid 1px #f00;
}
<table>
  <tr>
    <td>a</td>
    <td>b</td>
  </tr>
  <tr>
    <td>c</td>
    <td>d</td>
  </tr>
</table>
35
Simon Arnold

異なる列ではなく、テーブル内の垂直線が必要な人のためのサイモンの答えを詳しく説明します。注：彼の答えで指定されたとおりに正確に行う必要があります。テーブル自体にはborder-collapse：collapseが必要であるか、複数行が表示され、trにはborder：noneまたはアウトラインが表示され、td border-left/right/top/bottom部分が明らかです。

<html>
<head><style>
table {
        border-collapse:collapse;
}
tr {
        border:none;
}
th, td {
        border-collapse:collapse;
        border: 1px solid black;
        padding-top:0;
        padding-bottom:0;
}
.verticalSplit {
        border-top:none;
        border-bottom:none;
}
.verticalSplit:first-of-type {
        border-left:none;
}
.verticalSplit:last-of-type {
        border-right:none;
}
</style></head>
<body><table>
<tr><td>
        <table><tr>
                <td class="verticalSplit">A</td>
                <td class="verticalSplit">B</td>
        </tr></table></td>
<td>C</td></tr>
<tr><td>D</td><td>E</td></tr>
</table></body>
</html>
3
Andrew