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

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

PHP中文网

Libérer： 2017-06-21 16:19:04

original

2422 Les gens l'ont consulté

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 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; /*左边框宽度等于表格第一行第一格宽度*/  
            }

Copier après la connexion

<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 ce qui précède formater bien. 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>  <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

D'accord, j'ai fini les cinq méthodes, je l'espère fonctionne Utile pour tout le monde

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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