怎么用CSS做表格

怎么用CSS做表格,第1张

<!DOCTYPE html >

<head>

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

<title>无标题文档</title>

<style>

table { border:#30C 1px;border-style: solid;height:30px; margin-top:-1px}

</style>

</head>

<body>

<div class="table"></div>

<div class="table"></div>

<div class="table"></div>

<div class="table"></div>

<div class="table"></div>

<div class="table"></div>

</body>

</html>

border-style:边框样式

边框样式值如下:

none :无边框。与任何指定的border-width值无关

hidden :隐藏边框。IE不支持

dotted :在MAC平台上IE4+与WINDOWS和UNIX平台上IE55+为点线。否则为实线(常用)

dashed :在MAC平台上IE4+与WINDOWS和UNIX平台上IE55+为虚线。否则为实线(常用)

solid :实线边框(常用)

double :双线边框。两条单线与其间隔的和等于指定的border-width值

groove :根据border-color的值画3D凹槽

ridge :根据border-color的值画菱形边框

inset :根据border-color的值画3D凹边

outset :根据border-color的值画3D凸边

CSS设置字体的大小,我们首先想到的就应该是:font-size

1设置表格整体字体大小可以使用(具体字体大小,可以自己选择):table{font-size:12px;}

2设置某个单元格的大小,把所需要设置大小的那个单元格设置一个类名,如:<td class="t_fontSize"></td> 这样设置就可以使用t_fontSize{font-size:13px;}

注意:有可能你按照上面设置了单元格的字体大小了,但是没有在界面上显示出来(是因为有的样式,覆盖了你刚刚设置的样式。),这是你需要加上"!important",如:t_fontSize{font-size:13px!important;} 这样设置就可以显示出来了。

放屁,自己写的也变成抄袭了,去你妈的百度!!!

告诉你一个非常好用的css样式,特别好用

box-sizing: border-box;

即使加了padding或者margin属性都会有奇效哦

另外,你上面的滚动条改为overflow: auto;

至于高度百分比问题,需要设置一下:

html,body{height:100%;}

而且,你所设置80%高度的标签父级标签也要设一下,我随便写了一个案例,你看看,本来加了padding后实际显示的高度会大于设置的高度,但是加了box-sizing: border-box;后,显示的高度还是50%

<style type="text/css">

html,body{ height:100%; margin:0; padding:0;}

</style>

</head>

 

<body>

 <div style=" height:100%; background:red;">

  <div style=" height:600px; background:blue;">

   <div style=" height:50%; background:green; padding:50px; overflow:auto; box-sizing: border-box;">

    <div style="height:1000px; background:black; color:white;">这是内容部分</div>

   </div>

  </div>

 </div>

</body>

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/bake/13492154.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2025-09-01
下一篇2025-09-01

发表评论

登录后才能评论

评论列表(0条)

    保存