Use Div + CSS to simulate the diagonal line of a table
Original Site: biny reprinted, please indicate the source
First of all, I would like to declare that this is only a method for simulating the diagonal line of a CSS table. In actual work, I may think this is a little complicated. This is not the focus of this topic. If you are a friend of mine, please smile...
Sometimes we need to use the diagonal lines of tables when inserting documents. The common practice is to use images for processing, and to use VML to draw diagonal lines. Can we use HTML + CSS for implementation? The answer is yes. Let's look at the diagonal line of a table.
Principle:
The border line is used to touch the quasi-diagonal line. We know that if the border line of a div is set to be wide enough and different colors are defined, the adjacent border line junction is the diagonal line. With this principle in mind, we can use border-left and border-top to simulate the diagonal line effect.
First, create a structure:
<Div class = "out">
<B> Category </B>
<Em> name </em>
</Div>
We use <Div class = "out"> as the diagonal container to set the diagonal line style.CodeAs follows:
. Out {
Border-top: 40px # d6d3d6 solid;/* the top Border width is equal to the height of the first row of the table */
Width: 0px;/* set the container width to 0 */
Height: 0px;/* set the container height to 0 */
Border-left: 80px # bdbabd solid;/* the width of the left border is equal to the width of the first row of the table */
Position: relative;/* absolute positioning of the two sub-containers inside */
}
<B> and <em> labels are used to set two categories: Display: block, and clear the default font-style: normal font style; because its parent container is set to relative positioning, it is set to absolute positioning, so that it can be offset 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 simulated. Knowing how it works, you can turn into a lot of interesting things. Good luck!
This diagonal simulation method also has the following Disadvantages:
1. The width and height must be known.
2. The length of the width and height cannot be too big. You can try to pull the width several times longer than the height to see the effect. (Leave some homework and exercises for you)
3. You cannot set the color of oblique lines.
In addition, the above Code only tests IE6 and ff3, and other browsers do not test. Please test it.
The complete code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Use div+css to simulate the diagonal of the table</title><br />
<style type="text/css"><br />
*{padding:0;margin:0;}<br />
caption{font-size:14px;font-weight:bold;}<br />
table{ border-collapse:collapse;border:1px #525152 solid;width:50%;margin:0 auto;margin-top:100px;}<br />
th,td{border:1px #525152 solid;text-align:center;font-size:12px;line-height:30px;background:#C6C7C6;}<br />
th{background:#D6D3D6;}<br />
/*Analog diagonal*/<br />
.out{<br />
border-top:40px #D6D3D6 solid;/*The width of the upper border is equal to the height of the first row of the table*/<br />
width:0px;/*Make the container width 0*/<br />
height:0px;/*Make the container height 0*/<br />
border-left:80px #BDBABD solid;/*The width of the left border is equal to the width of the first row of the table*/<br />
position:relative;/*Let the two sub-containers inside be absolutely positioned*/<br />
}<br />
b{font-style:normal;display:block;position:absolute;top:-40px;left:-40px;width:35px;}<br />
em{font-style:normal;display:block;position:absolute;top:-25px;left:-70px;width:55x;}<br />
.t1{background:#BDBABD;}<br />
</style><br />
</head><br />
<body><br />
<table><br />
<caption>Use div+css to simulate the diagonal of the table</caption><br />
<tr><br />
<th style="width:80px;"><br />
<div class="out"><br />
<strong>Category</strong><br />
<em>Name</em><br />
</div><br />
</th><br />
<th>Grade</th><br />
<th>Class</th><br />
<th>Results</th><br />
<th>Class evenly score</th><br />
</tr><br />
<tr><br />
<td class="t1">Zhang San</td><br />
<td>Three</td><br />
<td>2</td><br />
<td>62</td><br />
<td>61</td><br />
</tr><br />
<tr><br />
<td class="t1">Li Si</td><br />
<td>Three</td><br />
<td>1</td><br />
<td>48</td><br />
<td>67</td><br />
</tr><br />
<tr><br />
<td class="t1">Wang Wu</td><br />
<td>Three</td><br />
<td>5</td><br />
<td>79</td><br />
<td>63</td><br />
</tr><br />
<tr><br />
<td class="t1">Zhao Liu</td><br />
<td>Three</td><br />
<td>4</td><br />
<td>89</td><br />
<td>66</td><br />
</tr><br />
</table><br />
</body><br />
</html><br />
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
