HTMLのテーブルにCSSで斜線を引く方法

はじめに

• HTMLのtableでthやtdに斜線を引く方法をご紹介
• tableのwidth, heightを設定しても若干表示はOS/ブラウザで表示が変わってくるのでその対応方法にも触れておく

書き方

HTMLの記述

• ここからjsファイルを落としてくる

<script src="css_browser_selector.js" type="text/javascript"></script>

CSSの記述

/*  斜線を引きたいタグにクラスslashをつけているとき(数値は適当) */

/* Windowsだけにあてたい場合 */
.win .slash {
    background: linear-gradient(12deg, white, white 48%, gray 49%, gray 51%, white 52%, white);
}
/* Macだけにあてたい場合 */
.mac .slash {
    background: linear-gradient(10deg, white, white 48%, gray 49%, gray 51%, white 52%, white);
}
/* Windows Chromeだけにあてたい場合 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  .win .slash {
      background: linear-gradient(8deg, white, white 48%, gray 49%, gray 51%, white 52%, white);
  }
}

---

• 参考文献：http://html999.sitemix.jp/tips/48.html

～ただの宣伝～

• 全国のSeleniumer必読
• Seleniumerといっていますが、Selenium, SauceLabs, Travis, Jenkinsに関するノウハウ書いているのでよかったら参考にしてみてください