【CSS】tableの枠線(border)を消す方法

今回は、tableの枠線(border)を消す方法について説明します！borderを全体的に消すには、border:none;を指定し、borderで一部消すには消したい線を指定(※)します。

※上線を消すには border-top:none; 右線を消すには border-right:none; 下線を消すには border-bottom: none; 左線を消すには border-left: none;

tableの枠線(border)を消す方法

border: none;        /* 枠線を消す */
border-top: none;    /* 上線を消す */
border-right: none;  /* 右線を消す */
border-bottom: none; /* 下線を消す */
border-left: none;   /* 左線を消す */

borderが重なっている箇所は、注意が必要です。例えば、データ１とデータ２の真ん中の線を消す時は、border-right:none;とborder-left:none;の指定が必要です。

<tr>
  <td style="border-right:none;">データ1</td>
  <td style="border-left:none;">データ2</td>
</tr>

tableの枠線(border)が消えない時は？

outline で線が引かれている可能性があります。 outlineも同様に outline:none;で線を消すことができます。

outline: solid 1px green;  /* データ1 */
outline: 1px ridge purple; /* データ3 */
outline: dashed skyblue;   /* データ5 */
outline: thick double red; /* データ7 */
outline: 3px solid;        /* データ9 */

まとめ

tableの枠線(border)を消す際には、border:none;を指定する。border:none;でも消えない線は、outlineで引かれている可能性があることを覚えておきましょう！