"Reprint" with div+css simulation table diagonal

This article refers to the blue ideal forum.

First, declare :

This is just a way to explore the use of a CSS simulation table diagonal, which may actually seem a bit of a fuss at work, which is not the focus of this topic. If this is a friend, please smile ...

Sometimes when inserting a document, to use the table diagonal, the common practice is to use the image of the way to deal with, there is the use of VML to draw diagonal, can you use the html+css way to achieve it? The answer is yes, let's touch a table diagonal.

principle :

Using the border line to touch the slash, we know that if the border line of a DIV is set wide enough and a different color is defined, its adjacent border of two lines is a slash. Knowing this principle, we can use Border-left and border-top to simulate the effect of a slash.

Let's start by creating a structure:

class="out">    <b> category </b>    <em> name </em></ Div>

We use <div class= "out" > as the diagonal container, we set the slash style, the key code is as follows:

. out{Border-top:40px #D6D3D6 Solid;/*the top border width is equal to the first row row height of the table*/width:0px;/*make the container width 0*/height:0px;/*let the container height be 0*/Border-left:80px #BDBABD Solid;/*left Border width equals first row width of table first*/position:relative;/*Make sure the two sub-containers inside are absolutely positioned.*/}

<b> and <em> two tags to set two categories, set them to block structure Display:block, clear their default font style Font-style:normal, because their parent container set relative positioning, so set it to absolute positioning, This will shift it to the position you want to specify.

b{font-style:normal;display:block;position:absolute;top:-40px;left:-40px;width:35px;} Em{font-style:normal;display:block;position:absolute;top:-25px;left:-70px;width:55x;}

Such a diagonal line is simulated. Know the principle, you can become a lot of interesting things come out, good luck!

The diagonal simulation method also has drawbacks:

1. The wide height must be known
2. The width of the height can not be too large, you can try to pull the width of the height of a few times better, see the effect. (Leave some homework for you to practice)
3. There is also a slash bar cannot set the color.

Another: The above code only tested IE6 and FF3, other browsers did not test, ask friends to test.

The following is the complete code:

<! DOCTYPE HTML Public"-//W3C//DTD XHTML 1.0 transitional//en" "HTTP://WWW.W3.ORG/TR/XHTML1/DTD/XHTML1-TRANSITIONAL.DTD">"http://www.w3.org/1999/xhtml">"Content-type"Content="text/html; Charset=utf-8"/><title> with DIV+CSS simulation table diagonal </title><style type="Text/css">*{padding:0; margin:0;} Caption{font-size:14px;font-Weight:bold;} table{Border-COLLAPSE:COLLAPSE;BORDER:1PX #525152Solid;width: -%;margin:0auto;margin-top:100px;} TH,TD{BORDER:1PX #525152solid;text-align:center;font-size:12px;line-height:30px;background: #C6C7C6;} Th{background: #D6D3D6;}/*Analog Diagonal*/. out{Border-top:40px #D6D3D6 Solid;/*the top border width is equal to the first row row height of the table*/width:0px;/*make the container width 0*/height:0px;/*let the container height be 0*/Border-left:80px #BDBABD Solid;/*left Border width equals first row width of table first*/position:relative;/*Make sure the two sub-containers inside are absolutely positioned.*/}b{font-style:normal;display:block;position:absolute;top:-40px;left:-40px;width:35px;} Em{font-style:normal;display:block;position:absolute;top:-25px;left:-70px;width:55x;}. T1{background: #BDBABD;}</style>"width:80px;"> <divclass=" out"> <b> category </b> <em> name </em> </div> </th> <th> Year    Class </th> <th> class </th> <th> results </th> <th> class sharing </th> </tr> <tr> <tdclass="T1"> Zhang San </td> <td> three </td> <td>2</td> <td> +</td> <td> A</td> </tr> <tr> &LT;TDclass="T1"> John Doe </td> <td> three </td> <td>1</td> <td> -</td> <td> the</td> </tr> <tr> &LT;TDclass="T1"> Harry </td> <td> three </td> <td>5</td> <td> -</td> <td> the</td> </tr> <tr> &LT;TDclass="T1"> Zhao Liu </td> <td> three </td> <td>4</td> <td> the</td> <td> the</td> </tr></table></body>