TABLEのTH,TDをCSSで縦並びにする

HTML/CSS
名前 山田 太郎
性別 男
年齢 19
→
名前 山田 太郎
性別 男
年齢 19




メールフォームプロCGIを使ったPCサイト（の問い合わせフォーム）をスマホ対応する時のこと。

送信前の確認画面で項目と値がTABLEタグで出力されて、他のタグに変更するのが面倒だったので、TABLEタグのままCSSで無理やり縦並びにしてみた。

もっとも単純なテーブルタグなら、

<table>
<tr><th>名前</th><td>山田 太郎</td></tr>
<tr><th>性別</th><td>男</td></tr>
<tr><th>年齢</th><td>19</td></tr>
</table>

CSSはこんな感じでTH,TDが縦に並んだ感じになる。

tr { position:relative; }
th { position:absolute; width:100%; }
td { padding-top:30px; }

よっしゃ、と思ったが、こんなことしなくても display:list-item; という便利なスタイルがあったの・・・こっちの方がよいね。。。

th,td { display:list-item; list-style:none; }