一昨日の最初の方に書いた制約の一つをJavaScriptでカバーしてみました。その制約は「斜線を引くセルの横幅・高さを絶対値で固定し、そこから値を計算してCSSに書く必要があった」点。今日はJavaScriptでセルサイズを取得し、CSSのtransform属性への設定を動的・フレキシブルに行います。ただしIE10では動かず（後述）、Chrome43とFirefox39で動作を確認。↓ はFirefoxでの画像。


サンプルテーブル
↓ こんな感じで、斜線を付ける任意のセル（ここでは2ヶ所）にIDを付け、中を空にしておきます。文字サイズやセル内パディングは自由に。罫線の太さ・スタイルは、変えると斜線の寸法算出に影響して結果が少し変になるかも。とりあえず今回は下の設定で試します。
<style>
table {
    border-collapse: collapse;
}

td {
    border: solid gray 1px;
    font-size: 18px;
    padding: 5px;
}
</style>
<table>
<tr><td id="□□□"><td>column1<td>column2<td>column3
<tr><td>row1<td>a<td>b<td>c
<tr><td>row2<td>d<td id="△△△"><td>f
<tr><td>row3<td>g<td>h<td>i
</table>
column1column2column3
row1abc
row2df
row3ghi


JavaScriptと実行結果
作成したJavaScriptの関数は次のとおり。引数は三つ、セルID、斜線の向き（パラメータの正負）および斜線スタイル。これで指定セルに好きな形の斜線を引けます。セルサイズをoffsetHeight（Width）属性で取得し、CSS3のtransform属性を使うので、これらに未対応なブラウザでは残念ながら動きません。なお指定されたセル内の子要素はいったん全削除します。斜線用のDIV要素を絶対配置で追加すると、ブラウザによっては微妙にサイズがずれたため。
<script>
function addDiagonal(cellid, sign, bstyle) {
    var cell = document.getElementById(cellid),
        div = document.createElement('div'),
        s1 = cell.style,
        s2 = div.style,
        y = cell.offsetHeight,
        x = cell.offsetWidth,
        tan = sign * y / x;

    while(cell.hasChildNodes()) cell.removeChild(cell.firstChild);
    cell.appendChild(div);
    s1.padding = 0;
    s1.overflow = 'hidden';
    s2.height = y + 'px';
    s2.width = x + 'px';
    s2.borderTop = bstyle;
    s2.transform = 'matrix(1, ' + tan + ', 0, 1, 0, ' + (y / 2) + ')';
}
</script>


上の関数を適当な場所に置き、ドキュメントロード後に例えば ↓ のように実行します。この時点でテーブルやセルの大きさが確定している前提。スクリプトの下が実際のテーブルで、最近のChromeとFirefoxなら二つのセルに斜線が出ていると思います。

自分の環境のIE10では、ローカルファイルに今回のサンプルテーブルとJavaScriptを置いて実行すると、なぜかテーブルがDOMに存在しないうちに関数が呼び出されてエラーになりました。オンラインではどうか分かりませんが、IEでのJavaScript実行タイミングは謎が多い…。
<script>
window.addEventListener('load', function() {
    addDiagonal('cell1', 1, 'solid gray 1px');
    addDiagonal('cell2', -1, 'dashed red 1px');
});
</script>
column1column2column3
row1abc
row2d
f
row3ghi


関数の第2引数が1なら右下がりの斜線、-1なら右上がり。これはtransform: matrix(a, c, b, d, tx, ty)のcパラメータの正負に対応しています。

↓Firefox（上）とChrome（下）での描画をキャプチャしたもの。斜線の太さに違いがあります。Chromeの方がやや細い。（そのせいで若干ギザギザにも見える）


以上、予め関数を用意して、テーブルが描画され終わってセルのサイズが確定してから関数を実行するという注意が必要ですが、IDを付けたセルに手軽&フレキシブルに斜線を付けられていいかも。

テーブル・セルの大きさがウィンドウサイズによって変わる場合、リサイズ時にも斜線をきっちり追従させたければ、onresizeで再び関数を呼び出せばいいのかな？当面そこまで必要ないので検証してませんが。