[HTML] table タグで枠線を非表示にするには style=”border:none;” を指定する

HTML の table タグで、枠線を非表示にするには style=”border:none;” を指定すると完成です。

table の枠線を消す方法

table, tbody, tr, td にそれぞれ border:none を指定すれば大丈夫です。

HTML タグに直接 style 指定するサンプルコード

<table style="border:none;">
  <tbody style="border:none;">
    <tr style="border:none;">
      <td style="border:none;">左側のコンテンツ(その1)</td>
      <td style="border:none;">右側のコンテンツ(その1)</td>
    </tr>
    <tr style="border:none;">
      <td style="border:none;">左側のコンテンツ(その2)</td>
      <td style="border:none;">右側のコンテンツ(その2)</td>
    </tr>
    <tr style="border:none;">
      <td style="border:none;">左側のコンテンツ(その3)</td>
      <td style="border:none;">右側のコンテンツ(その3)</td>
    </tr>
  </tbody>
</table>

上記のコードは以下のように展開されます。

左側のコンテンツ(その1) 右側のコンテンツ(その1)
左側のコンテンツ(その2) 右側のコンテンツ(その2)
左側のコンテンツ(その3) 右側のコンテンツ(その3)

2017年にもなって table タグの枠線を消す依頼がくるとは思いませんでした。

現場からは以上です。