Comment obtenir l'effet d'en-tête slash dans un tableau-tutoriel HTML-php.cn

Comment obtenir l'effet d'en-tête slash dans un tableau

php中世界最好的语言

Libérer： 2018-01-17 09:33:28

original

2603 Les gens l'ont consulté

Cette fois, je vais vous montrer comment obtenir l'effet d'en-tête slash dans le tableau. Quelles sont les précautions pour créer l'effet d'en-tête slash dans le tableau. Ce qui suit est un cas pratique. jetez un oeil.

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 implémenter cela Quel est l'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 image en arrière-plan. Il suffit de mettre la photo ici et remplissez-la. 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">
    <div class="biaoTou">
                         
    </div>
</td>

Copier après la connexion

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 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> 
    <div height="300">header</div> 
    <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>

Copier après la connexion

Je crois que vous maîtrisez la méthode après avoir lu ces cas. Pour des choses plus passionnantes, s'il vous plaît. faites attention au php chinois Autres articles connexes en ligne !

Lecture connexe :

Comment insérer une vidéo dans une page Web HTML

Comment utiliser HTML+CSS pour créer un survol de la souris Vous pouvez afficher la barre de menu secondaire

Comment faire en sorte que l'interface front-end efface automatiquement le cache des fichiers js et css

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!