Table table, everyone is definitely not unfamiliar with this thing. We can often encounter in the code. So it is necessary to add a sloping head to Table to Table, but how do you achieve this effect?
I summarized the following methods: 1. The simplest wayGo directly to the company's UI, let her make a picture, put it here as the background picture, and then fill it up. Is it very simple! Intersection Intersection
2. Quite simple approachIn fact, friends who know CSS3, when they see this effect, what appears in my mind is the attribute of Transform. Yes, this is indeed possible, and it is very simple. There is a problem. Pay attention to the compatibility of the browser. Maintain a sense of crisis at all times (IE still exists). If your company's requirements are only compatible with Chrome, then this method is very suitable for you.
3. Very simple approach .biaotou {border-top: 200px #199fff solid; /*The width of the upper frame is equal to the first line height of the table* /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. But there is an obvious problem with this writing: this is actually using the different BORDER to divide the oblique line of the head head with two colors. The colors on both sides of the oblique line cannot be the same. Use this method. But if we need the same color on both sides of the line, this approach is not applicable. Use with caution.
4. A very simple approachThis effect can actually use another new label Canvas with CSS3. It is a very simple way to use it as a diagonal line as a canvas, which is not explained in detail, but there is also a problem that is the problem of compatibility that is always talked about. If it is just compatible with chrome, you can do whatever you want (why our company I have to consider the abominable IE, and I also want to do only the project of Karnoisa).
5. Not easy to doThat's the JS approach
<! Doctype html public- // W3C // DTD HTML 4.01 Transitional // EN http://www.w3.org/tr/html4/loose.dtd> <HEAD> <Title> Slimad header <<Title> Slimad header <! /Title> <meta http-equiv = content-type content = gbk> </head> <body leftMargin = 0 TOPMARGIN = 0> <br> <br> <<DIV Height = 300> Header </div> <hr> LE border = 0 bgcolor = 000000 cellspacing = 1 width = 400 style = margin-left: 100px;> <trbgcolor = fffffFF> <td width = 52> <Table width = 100% height = 100% border = 0 cellpadding = 0 Cellspacing = 0> <TR> <TD ID = TD1> </TD> <TD> Score </td> </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> > <TD> Li Si </td> <TD> 99 </td> <td> 68 </td> <td> 71 </td> </tr> <trbgcolor = FFFFFFF> /Td> <TD> 33 </td> <TD> 44 </td> <TD> 55 </td> </tr> </table> <script type = text/javascript> fun 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; space (vparent.tagnamepercas e ()! = Body) {t += vparent.offsettop; vparentvparent = vparent.offsetparent;} Return T;} Function GetLeft (TDOBJ) {vparent = tdobj.offsetparent; t = tdobj.offsetLeft; While rent.tagname.touppercase ()! = Body) {t += vparent.offsetlect; 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,100000000); 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>Well, the five methods are finished, I hope to help everyone's learning, and I hope everyone supports VEVB martial arts network.