先週の記事「テーブル左上隅のセルだけ消す」の最後で、セル内斜線をCSSだけで入れるのは難しそうと書いたけど、CSS3のtransform属性を使って一応できました。太い境界線の「斜めの色の差」でなく、ちゃんとした斜「線」。Chrome/Chromium43、Firefox39、IE10で動作確認しました（下の画像はChrome）。



ソースは次項に書きます。現状での制約として
一つ目のCSS3普及は、いずれ時間が解決するかと。二つ目は、JavaScriptを援用して動的にCSSを書き換えれば対応可能かも。問題は三つ目で、ブラウザのレンダリングによるとしか…。Firefoxでは、ギザギザにならず滑かな斜線でした。

transform属性の各種ブラウザの対応状況はMozilla Developer Network : transformを参照。Chromeはベンダープレフィクス-webkitが必要となってますが、最近のバージョンでは不要でした。


ソースと実際の例
ブラウザが対応していれば、下のテーブルの左上隅セルに、右上がりの対角線が引かれてると思います。ソースとして、スタイルシートとTABLEタグの部分を抜粋。
column1column2
row1ab
row2cd 
<style>
table {
    border-collapse: collapse;
}

td {
    border: solid gray 1px;
    padding: 5px;
}

table tr:first-child td:first-child {
    height: 30px;
    width: 40px;
    padding: 0;
}

.diagonal {
    height: 100%;
    width: 100%;
    border-top: solid gray 1px;
}

.rightUp {
    transform: matrix(1, -0.75, 0, 1, 0, 15);
    /* 
        0.75 = 30 / 40 (height / width)
        15 = 30 / 2
    */
}
</style>
<table>
<tr><td><div class="diagonal rightUp"></div><td>column1<td>column2
<tr><td>row1<td>a<td>b
<tr><td>row2<td>c<td>d
</table>

原理は次のとおりです。
  1. 斜線を引くセル内に、空のDIV要素を挿入
  2. DIV要素のサイズをセルいっぱいに広げる（height: 100%; width: 100%;）
  3. DIV要素の上側だけに線を付ける（border-top: solid gray 1px;）
  4. transform属性でDIV要素を縦方向に斜めに変形（スキュー、またはシアー、せん断とも）＋移動。DIV上側の線がセルの対角線になるよう、matrixパラメータを入力。セル中央が原点なので、セル縦サイズの半分を縦方向の移動量にする（明日、少し補足します）
CSSで左上隅セルを指定する際に疑似クラス（first-child）を使ってます。transformが有効なブラウザなら当然使えると思うので。


その他の例
先ほどの右上がり斜線に対し、右下がりの場合。matrix第2引数の正負を入れ替えるだけ。これで縦方向の歪みの向きが逆になります。
column1column2
row1ab
row2cd 
<style>
table {
    border-collapse: collapse;
}

td {
    border: solid gray 1px;
    padding: 5px;
}

table tr:first-child td:first-child {
    height: 30px;
    width: 40px;
    padding: 0;
}

.diagonal {
    height: 100%;
    width: 100%;
    border-top: solid gray 1px;
}

.rightDown {
    transform: matrix(1, 0.75, 0, 1, 0, 15);
}
</style>
<table>
<tr><td><div class="diagonal rightDown"></div><td>column1<td>column2
<tr><td>row1<td>a<td>b
<tr><td>row2<td>c<td>d
</table>

↓ 右上がり・右下がり両方の斜線をクロスさせる場合。ちょっと面倒で、斜線の実体であるDIV要素をもう一つ作り絶対配置で重ねます。ブラウザによっては、重ねたDIV要素の位置がなぜか微妙にズレるので（Firefoxがそう）、ぴったり合わせたければ移動量や拡大率の調整が必要。
column1column2
row1ab
row2cd 
<style>
table {
    border-collapse: collapse;
}

td {
    border: solid gray 1px;
    padding: 5px;
}

table tr:first-child td:first-child {
    height: 30px;
    width: 40px;
    padding: 0;
    position: relative;
}

.diagonal {
    height: 100%;
    width: 100%;
    border-top: solid gray 1px;
}

.rightUp {
    transform: matrix(1, -0.75, 0, 1, 0, 15);
}

.rightDown.add {
    position: absolute;
    top: 0;
    left: 0;
    transform: matrix(1, 0.75, 0, 1, 0, 15);
}
</style>
<table>
<tr><td><div class="diagonal rightUp"></div>
    <div class="diagonal rightDown add"></div><td>column1<td>column2
<tr><td>row1<td>a<td>b
<tr><td>row2<td>c<td>d
</table>

↓ 何の役に立つか分かりませんが三角に塗る例。これは簡単で、斜線の実体であるDIV要素に色を付けるだけです。セルからはみ出さないよう、セルにoverflow: hiddenを設定します。
column1column2
row1ab
row2cd 
<style>
table {
    border-collapse: collapse;
}

td {
    border: solid gray 1px;
    padding: 5px;
}

table tr:first-child td:first-child {
    height: 30px;
    width: 40px;
    padding: 0;
    overflow: hidden; /* added */
}

.diagonal {
    height: 100%;
    width: 100%;
    border-top: solid gray 1px;
}

.rightDown {
    transform: matrix(1, 0.75, 0, 1, 0, 15);
}

.bgcolor {
    border:0;
    background: lightgray
}
</style>
<table>
<tr><td class="overflowHidden">
    <div class="diagonal rightDown bgcolor"></div><td>column1<td>column2
<tr><td>row1<td>a<td>b
<tr><td>row2<td>c<td>d
</table>

明日は、補足としてmatrixパラメータの算出過程について書きます。