To simulate a table diagonal with div+css

First DECLARE :

This is just a discussion of the use of a diagonal form of CSS simulation tables, which may actually be a bit of a fuss at work, which is not the focus of the discussion in this topic. If you think of this friend, please smile ...

Sometimes when inserting a document, use the diagonal of the table, common practice is to use the way of the picture to handle, there is to use VML to draw diagonal line, can use html+css way to realize? The answer is yes, let's touch the diagonal of a table below.

principle :

Using a border line to touch a slash, we know that if you set a div's border line wide enough to define a different color, its adjacent two border lines are diagonal. Knowing this principle, we can use Border-left and border-top to simulate the effect of a slash.

We first create a structure:

<div class= "Out" >
<b> category </b>
<em> name </em>
</div>

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

. out{
border-top:40px #D6D3D6 solid;/* top border width equals table first row Height * *
width:0px;/* make the container width 0*/
height:0px;/* make the container height 0*/
border-left:80px #BDBABD solid;/* The width of the left border is equal to the first width of the first row of the table * *
position:relative;/* let the inside of the two sub containers absolutely positioning * *
}

<b> and <em> two labels to set up two categories, set them to block structure Display:block, clear their default font style Font-style:normal, and set them as absolute positioning because their parent container has relative positioning set. This will offset it to the location 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 modeled. Know the principle, you can become a lot of interesting things out, wish you good luck!

This diagonal simulation also has drawbacks:

1. The width height must be known
2. The width of the length can not be too large, you can try to pull the width than the height of several times longer, see the effect. (For you to save some homework practice exercises)
3. There is also a slash bar can not set the color.

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

Here's the complete code:

&lt;! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "&gt;


&lt;html xmlns= "http://www.w3.org/1999/xhtml" &gt;


&lt;head&gt;


&lt;meta http-equiv= "Content-type" content= "text/html"; Charset=utf-8 "/&gt;


&lt;title&gt; div+css Simulation Table Diagonal &lt;/title&gt;


&lt;style type= "Text/css" &gt;


*{padding:0;margin:0;}


Caption{font-size:14px;font-weight:bold;}


table{border-collapse:collapse;border:1px #525152 solid;width:50%;margin:0 auto;margin-top:100px;


th,td{border:1px #525152 solid;text-align:center;font-size:12px;line-height:30px;background: #C6C7C6;}


th{background: #D6D3D6;}


/* Analog diagonal */


. out{


border-top:40px #D6D3D6 solid;/* upper border width equals table first row high * *


width:0px;/* make the container width 0*/


height:0px;/* Let the container height be 0*/


border-left:80px #BDBABD solid;/* The left border width is equal to the first width of the first row of the table * * *


position:relative;/* Let the inside of the two sub containers absolutely positioning * *


}


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


&lt;/style&gt;


&lt;/head&gt;


&lt;body&gt;


&lt;table&gt;


&lt;caption&gt; div+css Simulation Table Diagonal &lt;/caption&gt;


&lt;tr&gt;


&lt;th style= "width:80px;" &gt;


&lt;div class= "Out" &gt;


&lt;b&gt; Categories &lt;/b&gt;


&lt;em&gt; name &lt;/em&gt;


&lt;/div&gt;


&lt;/th&gt;


&lt;th&gt; Grade &lt;/th&gt;


&lt;th&gt; class &lt;/th&gt;


&lt;th&gt; Achievements &lt;/th&gt;


&lt;th&gt; class sharing &lt;/th&gt;


&lt;/tr&gt;


&lt;tr&gt;


&lt;td class= "T1" &gt; John &lt;/td&gt;


&lt;td&gt; three &lt;/td&gt;


&lt;td&gt;2&lt;/td&gt;


&lt;td&gt;62&lt;/td&gt;


&lt;td&gt;61&lt;/td&gt;


&lt;/tr&gt;


&lt;tr&gt;


&lt;td class= "T1" &gt; Dick &lt;/td&gt;


&lt;td&gt; three &lt;/td&gt;


&lt;td&gt;1&lt;/td&gt;


&lt;td&gt;48&lt;/td&gt;


&lt;td&gt;67&lt;/td&gt;


&lt;/tr&gt;


&lt;tr&gt;


&lt;td class= "T1" &gt; Harry &lt;/td&gt;


&lt;td&gt; three &lt;/td&gt;


&lt;td&gt;5&lt;/td&gt;


&lt;td&gt;79&lt;/td&gt;


&lt;td&gt;63&lt;/td&gt;


&lt;/tr&gt;


&lt;tr&gt;


&lt;td class= "T1" &gt; Zhao Liu &lt;/td&gt;


&lt;td&gt; three &lt;/td&gt;


&lt;td&gt;4&lt;/td&gt;


&lt;td&gt;89&lt;/td&gt;


&lt;td&gt;66&lt;/td&gt;


&lt;/tr&gt;


&lt;/table&gt;


&lt;/body&gt;


&lt;/html&gt;

From: Blue Ideal