5 ways to achieve the diagonal header effect in the table

Everyone must be familiar with table. We often encounter it in the code. Then 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 method

Go directly to the company's UI and ask her to make a picture, put it here as the background picture, and then fill it up. Isn’t it simple! ! !

2. A fairly simple approach

In fact, friends who are familiar with CSS3, when they see this effect, the transform attribute immediately comes to their mind. Yes, this is indeed possible, and it is also very simple. The only problem is that you need to pay attention to the browser compatibility issue. Everyone should always maintain a sense of crisis in their hearts (IE still exists). If your company requires compatibility only with Chrome, then this method is suitable for you.

3. Very simple method

.biaoTou {
                border-top: 200px #199fff solid; /*The width of the top border is equal to the height of the first row of the table*/  
                border-left: 200px #ff8838 solid; /*The left border width is equal to the width of the first cell of the first row of the table*/  
            }

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

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

4. A very simple approach

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

5. Not a simple approach

That's the js approach

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<HTML>  
<HEAD>  
<TITLE>Slash Header</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>Results</td>  
                    </tr>  
                    <tr>  
                        <td>Name</td>  
                        <td id="td2"></td>  
                    </tr>  
                </table></TD>  
            <TD width="81">Mathematics</TD>  
            <TD width="96">English</TD>  
            <TD width="99">C language</TD>  
        </TR>  
        <TR bgcolor="FFFFFF">  
            <TD>Zhang San</TD>  
            <TD>55</TD>  
            <TD>66</TD>  
            <TD>77</TD>  
        </TR>  
        <TR bgcolor="FFFFFF">  
            <TD>Li Si</TD>  
            <TD>99</TD>  
            <TD>68</TD>  
            <TD>71</TD>  
        </TR>  
        <TR bgcolor="FFFFFF">  
            <TD>Wang Wu</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='0' style='position: absolute; left: "  
                            + (x)  
                            + "; top: "  
                            + (y)  
                            + ";background-color: "  
                            + color  
                            + "' src='px.gif' 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, '#000000');  
        line(getLeft(td2), getTop(td2), getLeft(td2) + td2.offsetWidth,  
                getTop(td2) + td2.offsetHeight, '#000000');  
    </script>  
</BODY>  
</HTML>

Okay, I have explained the five methods. I hope they will be helpful for your study. I also hope that you will support 123WORDPRESS.COM.

<<: Detailed explanation of the integer data type tinyint in MySQL

>>: CSS to achieve single-select folding menu function