Maison > Article > interface Web > Comment obtenir l'effet d'en-tête slash dans un tableau

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

PHP中文网original: 2017-06-21 16:19:042433parcourir

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

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

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>

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!

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：Exemple de méthode d'implémentation du graphique carrousel ScrollView dans React NativeArticle suivant：Exemple de méthode d'implémentation du graphique carrousel ScrollView dans React Native

Articles Liés

Voir plus