tableタグのtrにボーダー(border)を引く方法

こんにちは、俺バカです。
tableタグのtrにボーダーを引きたいけどなんか反映されないことってありませんか?
当記事ではtableタグにボーダーを引く方法を書いていきたいと思います。
Advertisement
テーブルタグにのtrにボーダーを引く方法
このようなテーブルがあるとします。
<style> table { border: 1px solid #000; } td { width: 50px; } </style> <table> <tr> <td>AA1</td> <td>BB1</td> <td>CC1</td> </tr> <tr> <td>AA2</td> <td>BB2</td> <td>CC2</td> </tr> <tr> <td>AA3</td> <td>BB3</td> <td>CC3</td> </tr> </table>
上記のコードだとこのようなテーブルになります。
行ごとにボーダーを引きたいので、trにborder-bottomを引いてみよう。
<style> table { border: 1px solid #000; } td { width: 50px; } /* 追記 */ tr { border-bottom: 1px solid #000; } </style> <table> <tr> <td>AA1</td> <td>BB1</td> <td>CC1</td> </tr> <tr> <td>AA2</td> <td>BB2</td> <td>CC2</td> </tr> <tr> <td>AA3</td> <td>BB3</td> <td>CC3</td> </tr> </table>
反映されん!!!
こんな時は、tableタグに border-collapse: collapse を指定します。
<style> table { border-collapse: collapse; /* 追記 */ border: 1px solid #000; } td { width: 50px; } tr { border-bottom: 1px solid #000; } </style> <table> <tr> <td>AA1</td> <td>BB1</td> <td>CC1</td> </tr> <tr> <td>AA2</td> <td>BB2</td> <td>CC2</td> </tr> <tr> <td>AA3</td> <td>BB3</td> <td>CC3</td> </tr> </table>
いぇーーーーーーーーい!!!!!!!!
以上
Advertisement
-
前の記事
【廃止しろ】みなし残業はおかしい!みなし残業制のブラック企業に勤めていた俺の体験談とおかしいと思う点について 2019.09.02
-
次の記事
月12万(合計576万)の奨学金を借り、月々2万5000円を返済している25歳一人暮らし社会人のリアルな生活と後悔 2019.09.04