CSS で table に斜線を引く方法

CSS で table に斜線を引く方法

Posted at October 26,2009 12:03 AM
Tag:[border, CSS, table]

CSS で table に斜線を引いてみました。下の表の左上の斜線に CSS を使ってます。

サンプル(クリックすればサンプルページに移動します)
CSS で table に斜線

Windows XP + IE6 / IE7 / Firefox3 / Safri3 / Google Chrome で確認しています。

ポイントは以下です。

  • th 要素に position: relative; 斜線を引く要素(ここでは span)に position: absolute; を設定。
  • 斜線(border)を適用する要素の前に   を設定。  がなかったり、要素の後方に  があると、th のスタイルが隠れてしまう。
  • クロスブラウザにするため、font-size や line-height など、いくつかのプロパティを設定。

HTML

<table summary="data">
  <thead>
    <tr><th>&nbsp;<span class="arrow"></span></th><th class="column">a</th><th class="column">b</th><th class="column">c</th></tr>
  </thead>
  <tbody>
    <tr><th class="record">x</th><td>1</td><td>2</td><td>3</td></tr>
    <tr><th class="record">y</th><td>4</td><td>5</td><td>6</td></tr>
    <tr><th class="record">z</th><td>7</td><td>8</td><td>9</td></tr>
  </tbody>
</table>

CSS

* {
    margin: 0;
    padding: 0;
    font-family:Verdana,Arial,sans-serif;
}
table {
    font-size:16px;
    margin: 30px 0 0 30px;
    border: 1px solid #ccc;
    border-spacing: 1px;
    line-height: 2;
}
th {
    width: 50px;
    color: #444;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    position: relative;
}
td {
    padding: 2px 5px;
    text-align: center;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    background-color: #fff;
}
.column {
    background-color: #ccffcc;
}
.record {
    background-color: #ffcccc;
}
.arrow {
   width: 0;
   height: 0;
   line-height: 0;
   border-top: 32px solid #ccffcc;
   border-left: 50px solid #ffcccc;
   border-right: none; 
   position: absolute;
 
   /* ie6 */
   top: 0px;
   left: 0px;
}
html>body .arrow {
   top: 32px;
   left: 32px;
}
*:first-child+html .arrow { /* ie7 */
   top: 0;
   left: 0;
}

以前、border プロパティを使ってふきだしを表現する方法が紹介されていましたが、ふきだしの三角形以外に使い道がないかと思ったのがきっかけです。

rynote - 知らなかった...CSSのborderで斜めに線を引く方法

なお、サンプルでは span 要素の内容に何も入ってないので valid な XHTML ではありません。Another HTML-lint gateway では減点されます。あしからず。

2009.10.27
はてぶで指摘がありましたので最後の一文を修正しました。ご指摘ありがとうございます。

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)