千家信息网

css如何设置表格样式

发表于:2025-01-19 作者:千家信息网编辑
千家信息网最后更新 2025年01月19日,这篇文章主要为大家展示了"css如何设置表格样式",内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下"css如何设置表格样式"这篇文章吧。1、一个简单的表格tab
千家信息网最后更新 2025年01月19日css如何设置表格样式

这篇文章主要为大家展示了"css如何设置表格样式",内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下"css如何设置表格样式"这篇文章吧。

  1、一个简单的表格

  table.html

  

  

  表格样式

  

  

  

  课程表

  

  星期\课程

  星期一

  星期二

  星期三

  星期四

  星期五

  

  

  1-2节

  数学

  语文

  化学

  英语

  英语

  

  

  3-4节

  英语

  物理

  化学

  英语

  体育

  

  

  5-6节

  数学

  物理

  体育

  化学

  美术

  

  

  7-8节

  数学

  美术

  化学

  英语

  体育

  

  

  9-10节

  生物

  美术

  生物

  英语

  物理

  

  

  

  

  table.css

  table,td,th{

  border:1pxsolid#aaa;

  font-size:23px;

  }

  2、边框合并:boder-collapse

  属性值:

  separate;(分开,默认)

  collapse;(合并)

  table.css

  table,td,th{

  border:1pxsolid#aaa;

  font-size:23px;

  border-collapse:collapse;

  }

  3、边框间距border-spacing(前提是:border-collapse:separate;)

  table.css

  table,td,th{

  border:1pxsolid#aaa;

  font-size:23px;

  border-collapse:separate;

  border-spacing:45px;

  }

  4、设置表格标题的位置caption-side

  属性值:

  top;//默认

  bottom;

  left;

  right;

  table.css

  table,td,th{

  border:1pxsolid#aaa;

  font-size:23px;

  border-collapse:separate;

  border-spacing:45px;

  caption-side:bottom;

  }

  5、当单元格对象宽度超过单元格所定义的宽度时,可用table-layout:fixed保持表格宽度不被改变

  属性值:auto(默认)

  fixed(宽度固定)

  table.css

  table,td,th{

  border:1pxsolid#aaa;

  font-size:23px;

  border-collapse:separate;

  border-spacing:5px;

  table-layout:fixed;

  caption-side:top;

  }



以上是"css如何设置表格样式"这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!

0