Home >Web Front-end >H5 Tutorial >How to achieve the slash header effect in a table

How to achieve the slash header effect in a table

PHP中文网Original: 2017-06-21 16:19:042477browse

Table, this thing must be familiar to everyone. We often encounter it in the code, so it is sometimes necessary to add a slash header to the table, but how to achieve this effect?

I have summarized the following methods:

1. The simplest and easiest way

Go directly to the company’s UI and ask her to make a picture as a background Just put the picture here and fill it up. Is not it simple! ! !

2. Quite a simple method

In fact, friends who know CSS3, when they see this effect, the attribute transform instantly appears in their mind. Yes, this is indeed possible, and it is very simple. , there is a problem that needs to be paid attention to the compatibility of browsers. Everyone must always maintain a sense of crisis (IE still exists). If your company's requirement is to only be compatible with chrome, then this method is suitable for you.

3. Very simple method

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

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

This method is also very simple, just write it down according to the above format. However, there is an obvious problem with this way of writing: This method actually uses two different colors of borders to divide the diagonal line of the table header. The colors on both sides of the diagonal line cannot be the same. If you are doing some forms such as promotional activities, you can Use this method. But if we need the colors on both sides of the slash to be the same, this approach is not applicable. Use with caution.

4. Very simple method

This effect can actually be achieved by using canvas, another new tag of CSS3. Using it as a canvas to draw a diagonal line is a very simple method, so I won’t explain it in detail. However, there is also a problem, which is the common compatibility issue. If it is only compatible with chrome, you can do whatever you want (why our company I always have to consider the abominable IE, and I also want to only do projects that are compatible with Google).

5. Not a simple method

That is the js method

<!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>

Okay, I have finished explaining the five methods, I hope it can help everyone Helpful

The above is the detailed content of How to achieve the slash header effect in a table. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Example of implementation method of ScrollView carousel chart in React NativeNext article：Example of implementation method of ScrollView carousel chart in React Native

See more

How to achieve the slash header effect in a table

Related articles