表に斜めヘッダー効果を出す5つの方法

誰もがテーブルをよく知っているはずです。コード内でよく見かけます。テーブルにスラッシュヘッダーを追加する必要がある場合がありますが、この効果を実現するにはどうすればよいでしょうか。

以下の方法をまとめました。

1. 最も簡単な方法

会社の UI に直接アクセスして、画像を作成してもらい、それを背景画像としてここに配置して、塗りつぶします。簡単じゃないですか！！！

2. かなりシンプルなアプローチ

実際、CSS3 に精通している友人は、この効果を見ると、すぐに transform 属性を思い浮かべます。はい、これは確かに可能であり、非常に簡単です。唯一の問題は、ブラウザの互換性の問題に注意する必要があることです。誰もが常に心の中に危機感を持ち続ける必要があります (IE はまだ存在します)。会社が Chrome との互換性のみを必要とする場合は、この方法が適しています。

3. 非常に簡単な方法

.biaoTou {
                border-top: 200px #199fff solid; /*上側の境界線の幅は、表の最初の行の高さと同じです*/  
                border-left: 200px #ff8838 solid; /*左の境界線の幅は、表の最初の行の最初のセルの幅と同じです*/  
            }

<td幅="200">
    <div class="biaoTou">
                        
    </div>
</td>

この方法も非常に簡単で、上記の形式に従って書き留めるだけです。ただし、この書き方では明らかな問題があります。テーブルヘッダーの対角線を分割するために、実際には 2 つの異なる色の境界線が使用されています。対角線の両側の色を同じにすることはできません。この方法は、プロモーション活動やその他の形式を行っている場合に使用できます。しかし、対角線の両側の色を同じにする必要がある場合、このアプローチは適用できません。注意してご使用ください。

4. 非常にシンプルなアプローチ

この効果は、実際には CSS3 の別の新しいタグである canvas を使用して実現できます。キャンバスとして使って対角線を描くというのは非常に単純なアプローチなので、ここでは詳しく説明しません。ただ、昔からある互換性の問題もあります。Chrome にしか対応していないのであれば、何をやっても構いません（なぜ弊社は IE のことばかり考えないといけないのでしょうか？私も Google と互換性のあるプロジェクトだけをやりたいです）。

5. 単純なアプローチではない

それがjsのアプローチです

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<HTML>  
<ヘッド>  
<TITLE>スラッシュヘッダー</TITLE>  
<meta http-equiv="コンテンツタイプ" コンテンツ="charset=gbk">  
</HEAD>  
  
<本文左マージン=0 上マージン=0>  
    <br>  
    <div height="300">ヘッダー</div>  
    <時間>  
    <表 border=0 bgcolor="000000" cellspacing="1" width=400  
        スタイル="margin-left: 100px;">  
        <TR bgcolor="FFFFFF">  
            <TD 幅="111" 高さ="52"><テーブル 幅="100%" 高さ="100%"  
                    境界線="0" セルパディング="0" セル間隔="0">  
                    <tr>  
                        <td id="td1"></td>  
                        <td>結果</td>  
                    </tr>  
                    <tr>  
                        <td>名前</td>  
                        <td id="td2"></td>  
                    </tr>  
                </テーブル></TD>  
            <TD width="81">数学</TD>  
            <TD width="96">英語</TD>  
            <TD width="99">C言語</TD>  
        </TR>  
        <TR bgcolor="FFFFFF">  
            <TD>張三</TD>  
            <TD>55</TD>  
            <TD>66</TD>  
            <TD>77</TD>  
        </TR>  
        <TR bgcolor="FFFFFF">  
            <TD>李思</TD>  
            <TD>99</TD>  
            <TD>68</TD>  
            <TD>71</TD>  
        </TR>  
        <TR bgcolor="FFFFFF">  
            <TD>王武</TD>  
            <TD>33</TD>  
            <TD>44</TD>  
            <TD>55</TD>  
        </TR>  
    </表>  
    <script type="text/javascript">  
        関数 a(x, y, 色) {  
            書類  
                    .write("<img border='0' style='position: absolute; left: "  
                            + (バツ)  
                            + "; 上: "  
                            + (イ)  
                            + ";背景色: "  
                            + 色  
                            + "' src='px.gif' width=1 height=1>")  
        }  
        関数 getTop(tdobj) {  
            vParent = tdobj.offsetParent;  
            t = tdobj.offsetTop;  
            (vParent.tagName.toUpperCase() != "BODY") {  
                t += vParent.offsetTop;  
                vParentvParent = vParent.offsetParent;  
            }  
            t を返します。  
        }  
  
        関数 getLeft(tdobj) {  
            vParent = tdobj.offsetParent;  
            t = tdobj.offsetLeft;  
            (vParent.tagName.toUpperCase() != "BODY") {  
                t += vParent.offsetLeft;  
                vParentvParent = vParent.offsetParent;  
            }  
            t を返します。  
        }  
        関数 line(x1, y1, x2, y2, 色) {  
            変数tmp  
            (x1 >= x2)の場合{  
                tmp = x1;  
                x1 = x2;  
                x2 = 一時;  
                tmp = y1;  
                y1 = y2;  
                y2 = tmp;  
            }  
            ( var i = x1; i <= x2; i++) {  
                x = i;  
                y = (y2 - y1) / (x2 - x1) * (x - x1) + y1;  
                a(x, y, 色);  
            }  
        }  
        //行(1,1,100,100,"000000");   
        行(getLeft(td1), getTop(td1), getLeft(td1) + td1.offsetWidth,  
                getTop(td1) + td1.offsetHeight, '#000000');  
        行(getLeft(td2)、getTop(td2)、getLeft(td2) + td2.offsetWidth、  
                getTop(td2) + td2.offsetHeight, '#000000');  
    </スクリプト>  
</本文>  
</HTML>

さて、5つの方法について説明しました。皆さんの学習に役立つことを願っています。また、123WORDPRESS.COM を応援していただければ幸いです。

<<: MySQLの整数データ型tinyintの詳細な説明

>>: 単一選択折りたたみメニュー機能を実現するCSS