Use div css to simulate the diagonal line of the table, and divcss to simulate the diagonal line of the table.
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> Use div css to simulate the diagonal line of a table </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 ;}
/* Simulate diagonal lines */
. 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 {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>
</Head>
<Body>
<Table>
<Caption> Use div css to simulate the diagonal line of the table </caption>
<Tr>
<Th style = "width: 80px;">
<Div class = "out">
<B> Category </B>
<Em> name </em>
</Div>
</Th>
<Th> Grade </th>
<Th> class </th>
<Th> score </th>
<Th> average class score </th>
</Tr>
<Tr>
<Td class = "t1"> James </td>
<Td> 3 </td>
<Td> 2 </td>
<Td> 62 </td>
<Td> 61 </td>
</Tr>
<Tr>
<Td class = "t1"> Li Si </td>
<Td> 3 </td>
<Td> 1 </td>
<Td> 48 </td>
<Td> 67 </td>
</Tr>
<Tr>
<Td class = "t1"> Wang Wu </td>
<Td> 3 </td>
<Td> 5 </td>
<Td> 79 </td>
<Td> 63 </td>
</Tr>
<Tr>
<Td class = "t1"> Zhao Liu </td>
<Td> 3 </td>
<Td> 4 </td>
<Td> 89 </td>
<Td> 66 </td>
</Tr>
</Table>
<Div> http://www.999jiujiu.com/</div>
</Body>
</Html>
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
