異なる罫線の幅で偶数のテーブルの境界線を描画する方法は？

Question

クロスワードジェネレータを実装しています。それは、行ワードあたりと文字あたりのセルとのクロスワードを生成し、そのキーワードが画像のように、より広い境界線と灰色の背景が付いている：

はこれを達成するために、私の生成されたコードは、次のおおよそです：

#crossword { 
 
    border-spacing: 0px; 
 
    border-collapse:collapse; 
 
} 
 

 
.word { 
 
    vertical-align: middle; 
 
    align-items: center; 
 
    text-align: center; 
 
    justify-content: center; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.cell { 
 
    width: 30px; 
 
    height: 30px; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.letter { 
 
    border: 1px solid black; 
 
} 
 

 
.keyword { 
 
    border-width: 2px; 
 
    background-color: gray; 
 
}

<table id="crossword"> 
 
    <tr class="word"> 
 
     <td class="cell letter">W</td> 
 
     <td class="cell letter keyword">C</td> 
 
     <td class="cell letter">A</td> 
 
    </tr> 
 
</table>

私の問題は、画像の赤の楕円でマークされた - キーワードの境界線は、残りの部分よりも1ピクセル幅の広いもの、クロスワードのトップとボトムラインを破ります。 border-collapseプロパティを削除しようとしましたが、その結果、各行接続に二重の罫線が表示されていました。

現在、私は世代のためにtable、trとtdを使用していますが、div Sを使用したソリューションがある場合、私は、スイッチさせていただきます。

私の質問は、個々のセル（固有のクラスを追加するなど）に一意に対応できると仮定して、トップセルとボトムセルをキーワードセルの内側に表示する方法？

私はbox-shadowを使って1つの解決策を見つけましたが、実際にはクロスブラウザではなく、多くの魔法が必要なので、可能ならば避けてください。

Answer 1

それは少し低いように見えますが、あなたが最も外側の境界線を作るためにこれ以外に、他のオプションが均等に

を揃えていない

table#crossword tr:first-child td { 
    border-top: 1px solid black; 
} 
table#crossword tr:last-child td { 
    border-bottom: 1px solid black; 
} 
table#crossword tr td:first-child { 
    border-left: 1px solid black; 
} 
table#crossword tr td:last-child { 
    border-right: 1px solid black; 
} 

を使用してテーブルのデフォルトの境界線を一致させるために、テーブルの最も外側の境界線を保ちます

デモ

#crossword { 
 
    border-spacing: 0px; 
 
    border-collapse:collapse; 
 
} 
 

 
.word { 
 
    vertical-align: middle; 
 
    align-items: center; 
 
    text-align: center; 
 
    justify-content: center; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.cell { 
 
    width: 30px; 
 
    height: 30px; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.letter { 
 
    border: 1px solid black; 
 
} 
 

 
.keyword { 
 
    border-width: 2px; 
 
    background-color: gray; 
 
} 
 

 
table#crossword tr:first-child td { 
 
    border-top: 1px solid black; 
 
} 
 
table#crossword tr:last-child td { 
 
    border-bottom: 1px solid black; 
 
} 
 
table#crossword tr td:first-child { 
 
    border-left: 1px solid black; 
 
}

<table id="crossword"> 
 
    <tr class="word"> 
 
     <td class="cell letter">W</td> 
 
     <td class="cell letter keyword">C</td> 
 
     <td class="cell letter">A</td> 
 
    </tr> 
 
    <tr class="word"> 
 
     <td class="cell letter">W</td> 
 
     <td class="cell letter keyword">C</td> 
 
     <td class="cell letter">A</td> 
 
    </tr> 
 
    <tr class="word"> 
 
     <td class="cell letter">W</td> 
 
     <td class="cell letter keyword">C</td> 
 
     <td class="cell letter">A</td> 
 
    </tr> 
 
</table>

Answer 2

「ボックスサイズ：border-box;」を追加すると、唯一.keywordクラスのために、それは動作します - 少なくとも、それはテーブルの外側の境界線の外に出ていません。

#crossword { 
 
    border-spacing: 0px; 
 
    border-collapse: collapse; 
 
} 
 
#crossword .keyword { 
 
    box-sizing: border-box; 
 
} 
 

 
.word { 
 
    vertical-align: middle; 
 
    align-items: center; 
 
    text-align: center; 
 
    justify-content: center; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.cell { 
 
    width: 30px; 
 
    height: 30px; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.letter { 
 
    border: 1px solid black; 
 
} 
 

 
.keyword { 
 
    border-width: 2px; 
 
    background-color: gray; 
 
}

<table id="crossword"> 
 
    <tr class="word"> 
 
     <td class="cell letter">W</td> 
 
     <td class="cell letter keyword">C</td> 
 
     <td class="cell letter">A</td> 
 
    </tr> 
 
<tr class="word"> 
 
     <td class="cell letter">B</td> 
 
     <td class="cell letter keyword">K</td> 
 
     <td class="cell letter">L</td> 
 
    </tr> 
 
<tr class="word"> 
 
     <td class="cell letter">F</td> 
 
     <td class="cell letter keyword">R</td> 
 
     <td class="cell letter">V</td> 
 
    </tr> 
 
    <tr class="word"> 
 
     <td class="cell letter">T</td> 
 
     <td class="cell letter">E</td> 
 
     <td class="cell letter">Q</td> 
 
    </tr> 
 
</table>