より良いエンジニアを目指して

1日1つ。良くなる!上手くなる!

HTMLのtableタグで内枠の横線のみを表示する

職場でJIRAのカスタムフィールドの説明としてHTMLで表で表示したいと思いました。

HTMLで簡単に表を見せたいときはtableタグを使うことになります。

とはいえ、単純にborderプロパティを使っては見栄えが悪いです。

<table border="1">

f:id:rimever:20200315083753p:plain

本来だとcssで頑張ることになりますが、JIRAのカスタムフィールドなのでcssは指定できず、HTMLのみで勝負という状況でした。

rulesプロパティを指定すると横線のみの表示にできるようです。

<table border="1" rules="rows">

とします。

f:id:rimever:20200315084151p:plain

すっきりしましたね。

ただ、思ったのは外枠を無くしたい、ということでした。

囲んだところで表を窮屈に見せることになります。

<table rules="rows">

もしかして、これでいけるのでは?

f:id:rimever:20200315084404p:plain

行けました。