Maison > Article > interface Web > 5 façons d'implémenter l'effet d'en-tête slash dans les tableaux en HTML5

5 façons d'implémenter l'effet d'en-tête slash dans les tableaux en HTML5

黄舟original: 2017-07-18 14:15:215624parcourir

Table, cette chose doit être familière à tout le monde. On la rencontre souvent dans le code, il est donc parfois nécessaire d'ajouter un en-tête slash au tableau, mais comment obtenir cet effet ?

J'ai résumé les méthodes suivantes :

1. La méthode la plus simple et la plus simple

Allez directement dans l'interface utilisateur de l'entreprise et demandez-lui de faire une photo, mettez ici comme image d'arrière-plan, puis remplissez-le. N'est-ce pas très simple ! ! !

2. Une méthode assez simple

En fait, amis qui connaissent CSS3, lorsqu'ils voient cet effet, l'attribut transform apparaît instantanément dans leur esprit Oui, c'est effectivement possible, et c'est possible. C'est très simple. , il y a un problème auquel vous devez faire attention à la compatibilité des navigateurs. Tout le monde doit toujours garder un sentiment de crise (IE existe toujours). Si l'exigence de votre entreprise est d'être uniquement compatible avec Chrome, alors cette méthode est la bonne. adapté à vous.

3. Méthode très simple

.biaoTou {
                border-top: 200px #199fff solid; /*上边框宽度等于表格第一行行高*/  
                border-left: 200px #ff8838 solid; /*左边框宽度等于表格第一行第一格宽度*/  
            }

<td width="200">
    <p class="biaoTou">
                        
    </p>
</td>

Cette méthode est également très simple, il suffit de l'écrire selon le format ci-dessus. Cependant, cette façon d'écrire présente un problème évident : cette méthode utilise en fait deux couleurs de bordures différentes pour diviser la ligne diagonale de l'en-tête du tableau. Les couleurs des deux côtés de la ligne diagonale ne peuvent pas être les mêmes. certaines formes telles que les activités promotionnelles, vous pouvez utiliser cette méthode. Mais si nous voulons que les couleurs des deux côtés de la barre oblique soient les mêmes, cette approche n'est pas applicable. A utiliser avec prudence.

4. Méthode très simple

Cet effet peut en fait être obtenu en utilisant une autre nouvelle balise de CSS3 : canvas. L'utiliser comme canevas pour tracer une ligne diagonale est une méthode très simple, je ne l'expliquerai donc pas en détail. Cependant, il y a aussi un problème, qui est le problème de compatibilité courant s'il n'est compatible qu'avec Chrome. pouvez faire ce que vous voulez (pourquoi notre entreprise, je dois toujours considérer l'abominable IE, et je veux aussi ne faire que des projets compatibles avec Google).

5. Pas une méthode simple

C'est la méthode js

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<HTML>  
<HEAD>  
<TITLE>斜线表头</TITLE>  
<meta http-equiv="content-type" content="charset=gbk">  
</HEAD>  
  
<body leftmargin=0 topmargin=0>  
    <br>  
    <p height="300">header</p>  
    <hr>  
    <TABLE border=0 bgcolor="000000" cellspacing="1" width=400  
        style="margin-left: 100px;">  
        <TR bgcolor="FFFFFF">  
            <TD width="111" height="52"><table width="100%" height="100%"  
                    border="0" cellpadding="0" cellspacing="0">  
                    <tr>  
                        <td id="td1"></td>  
                        <td>成绩</td>  
                    </tr>  
                    <tr>  
                        <td>姓名</td>  
                        <td id="td2"></td>  
                    </tr>  
                </table></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>  
    </TABLE>  
    <script type="text/javascript">  
        function a(x, y, color) {  
            document  
                    .write("<img   border=&#39;0&#39;   style=&#39;position:   absolute;   left:   "  
                            + (x)  
                            + ";   top:   "  
                            + (y)  
                            + ";background-color:   "  
                            + color  
                            + "&#39;   src=&#39;px.gif&#39;   width=1   height=1>")  
        }  
        function getTop(tdobj) {  
            vParent = tdobj.offsetParent;  
            t = tdobj.offsetTop;  
            while (vParent.tagName.toUpperCase() != "BODY") {  
                t += vParent.offsetTop;  
                vParentvParent = vParent.offsetParent;  
            }  
            return t;  
        }  
  
        function getLeft(tdobj) {  
            vParent = tdobj.offsetParent;  
            t = tdobj.offsetLeft;  
            while (vParent.tagName.toUpperCase() != "BODY") {  
                t += vParent.offsetLeft;  
                vParentvParent = vParent.offsetParent;  
            }  
            return t;  
        }  
        function line(x1, y1, x2, y2, color) {  
            var tmp  
            if (x1 >= x2) {  
                tmp = x1;  
                x1 = x2;  
                x2 = tmp;  
                tmp = y1;  
                y1 = y2;  
                y2 = tmp;  
            }  
            for ( var i = x1; i <= x2; i++) {  
                x = i;  
                y = (y2 - y1) / (x2 - x1) * (x - x1) + y1;  
                a(x, y, color);  
            }  
        }  
        //line(1,1,100,100,"000000");   
        line(getLeft(td1), getTop(td1), getLeft(td1) + td1.offsetWidth,  
                getTop(td1) + td1.offsetHeight, &#39;#000000&#39;);  
        line(getLeft(td2), getTop(td2), getLeft(td2) + td2.offsetWidth,  
                getTop(td2) + td2.offsetHeight, &#39;#000000&#39;);  
    </script>  
</BODY>  
</HTML>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Tutoriel graphique sur la façon de contrôler les bordures intérieures et extérieures, la couleur et la taille du tableau à l'aide de html5+CSSArticle suivant：Tutoriel graphique sur la façon de contrôler les bordures intérieures et extérieures, la couleur et la taille du tableau à l'aide de html5+CSS

Articles Liés

Voir plus