Only for novice reference study, we welcome you to propose more ways to achieve.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> 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 #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;/* The upper border width equals the row height of the first row of the table */
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 two sub-containers inside absolutely position */}
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>
<body>
<table>
<caption> div+css Simulation Table Diagonal </caption>
<tr>
<th style= "width:80px;" >
<div class= "Out" > <b> category </b> <em> name </em> </div>
</th>
<th> Grade </th>
<th> class </th>
<th> Results </th>
<th> class Sharing </th>
</tr>
<tr>
<TD class= "T1" > Zhang San </td>
<td> three </td>
<td>2</td>
<td>62</td>
<td>61</td>
</tr>
<tr>
<TD class= "T1" > John Doe </td>
<td> three </td> <td>1</td>
<td>48</td> <td>67</td>
</tr>
<tr>
<TD class= "T1" > Harry </td>
<td> three </td> <td>5</td>
<td>79</td> <td>63</td>
</tr>
<tr> <td class= "T1" > Zhao Liu </td> <td> three </td> <td>4</td> <td>89</td> <td>66</td> </tr>
</table>
</body>
The above is HTML and CSS to do the Web Instance Tutorial: Simulation of the table diagonal content, more related articles please pay attention to topic.alibabacloud.com (www.php.cn)!
