読者です 読者をやめる 読者になる 読者になる

とある技術者のお遊びフライト日記

ゲームをきっかけに国内飛び回る謎な人の日記。時々技術ネタもご提供。

はてなダイアリーの表組みデザインを変更した

技術系ネタ

表組みのデザインを変えた。
枠線がなく、表の背景色が本文と同じでは非常に見づらい。

少し手間取ったけど、内容としては初歩的。

div.section table {
    border: 1px #DDDDDD solid;
    border-collapse: collapse;
    border-spacing: 0;
}

div.section table tr {
    padding: 5px;
    border: #DDDDDD solid;
    border-width: 0 0 1px 1px;
    background: #F2F2E6;
    font-weight: normal;
    line-height: 120%;
    text-align: center;
}

div.section table td {
    padding: 5px;
    border: 1px #DDDDDD solid;
    border-width: 0 0 1px 1px;
    text-align: center;
}

はてなダイアリーでは、本文が“section”属性のついたdivタグ内に綴られる。
本文中の表組みは、そのdivタグ中にtable > tbody > tr > tdという順で綴られて、見出しと各項目の区別がない(見出し、各項目ともに、tr > td の構造で各要素を入れてあるだけ)。

妙な構造だな……と思いつつ、いじったのでした。