5 ways to implement the slash header effect in table tables in HTML5-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

5 ways to implement the slash header effect in table tables in HTML5

黄舟

Jul 18, 2017 pm 02:15 PM

h5 html5 table

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 , put it here as a background image, and then 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; /*左边框宽度等于表格第一行第一格宽度*/  
            }

Copy after login

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

Copy after login

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

Copy after login

The above is the detailed content of 5 ways to implement the slash header effect in table tables in HTML5. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

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