HTML和CSS做网页实例教程:模拟表格对角线

企鹅博客
企鹅博客
企鹅博客
25193
文章
0
评论
2020年10月11日06:23:31 评论 10 views 1513字阅读5分2秒

仅供新手参考学习,欢迎大家提出更多的实现方法。

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>模拟表格对角线</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;} /*模拟对角线*/

.out{ border-top:40px #D6D3D6 solid;/*上边框宽度等于表格第一行行高*/

width:0px;/*让容器宽度为0*/

height:0px;/*让容器高度为0*/

border-left:80px #BDBABD solid;/*左边框宽度等于表格第一行第一格宽度*/

position:relative;/*让里面的两个子容器绝对定位*/ }

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>用div+css模拟表格对角线</caption>

<tr>

<th style="width:80px;">

<div class="out"> <b>类别</b> <em>姓名</em> </div>

</th>

<th>年级</th>

<th>班级</th>

<th>成绩</th>

<th>班级均分</th>

</tr>

<tr>

<td class="t1">张三</td>

<td>三</td>

<td>2</td>

<td>62</td>

<td>61</td>

</tr>

<tr>

<td class="t1">李四</td>

<td>三</td> <td>1</td>

<td>48</td> <td>67</td>

</tr>

<tr>

<td class="t1">王五</td>

<td>三</td> <td>5</td>

<td>79</td> <td>63</td>

</tr>

<tr> <td class="t1">赵六</td> <td>三</td> <td>4</td> <td>89</td> <td>66</td> </tr>

</table>

</body>

</html>

以上就是HTML和CSS做网页实例教程:模拟表格对角线的内容,更多相关文章请关注PHP中文网(www.php.cn)!

继续阅读
css的一些小技巧!页面视觉差!_html/css_WEB-ITnose html教程

css的一些小技巧!页面视觉差!_html/css_WEB-ITnose

相当长的一段时间,现在网站与所谓的“视差”效果一直很受欢迎。 万一你没有听说过这种效果,不同的图像,在不同的方向移动或层主要包括。这导致了一个很好的光学效应,使参观者的注意。 在网页设计中,为了实现这...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: