设置表格CSS样式需要注意什么
程序员文章站
2022-04-19 10:16:04
...
我们知道，如果表格的CSS样式有很多，今天就给大家详细的讲解一下表格table tr td CSS样式设置， 给table表格设置CSS样式表需要注意哪些方面
在一个网页中多处使用了表格table标签，这个时候给指定的表格对象设置样式依然可以通过CSS进行控制设置。
其实有时我们这样思考将table标签当作DIV标签来布局设置CSS，就变得简单多了。
对table设置样式
通过对应table父级样式命名指定对象内table样式
案例完整HTML+CSS代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>指定对象内table设置样式</title>
<style>
.p{ width:400px}
.p table{ background:#CCC; color:#F00}
.p table td{ background:#FFF}
</style>
</head>
<body>
<p class="p">
<table width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<td>内容一</td>
<td>内容一</td>
<td>内容一</td>
</tr>
<tr>
<td>内容二</td>
<td>内容</td>
<td>内容</td>
</tr>
</table>
</p>
</body>
</html>
小结
以上通过父级指定table和td进行CSS样式设置。
通过对table设置单独id或class
多处使用table表格布局，这个时候如果直接对table标签设置样式，这个时候网页中table表格布局均会受设置。这个时候只需要对table加id或class设置即可区别性对table设置需要CSS样式。
对表格td设置CSS
在表格网页布局中，一般情况下都需要对td设置样式，比如对td设置行高，padding等均是有效果的。
完成HTML+CSS代码如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>指定对象内table td设置样式</title>
<style>
.p-td{ width:400px}
.p-td table td{ background:#CCC; color:#000; line-height:40px}
</style>
</head>
<body>
<p class="p-td">
<table width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<td>内容一</td>
<td>内容一</td>
<td>内容一</td>
</tr>
<tr>
<td>内容二</td>
<td>内容</td>
<td>内容</td>
</tr>
</table>
</p>
</body>
</html>
对指定表格里td设置样式效果
以上通过CSS指向，设置指定对象里table的td样式。
发散思维：如果想特定表格td设置不同CSS样式，可以对td再加class实现不同样式设置。
相信看了这些案例你已经掌握了方法，更多精彩请关注其它相关文章！
相关阅读：
以上就是设置表格CSS样式需要注意什么的详细内容，更多请关注其它相关文章！
推荐阅读
-
为什么设置的表格边框的颜色 预览页面的时候边框都变成黑色了_html/css_WEB-ITnose
-
精通CSS+DIV网页样式与布局设置表单和表格_html/css_WEB-ITnose
-
在
- 标签内设置list-style-type:disc样式后，为什么在IE11和火狐浏览器显示效果不一样？如何使ie11显示成火狐的样子？_html/css_WEB-ITnose
-
表格样式编辑好后，为什么一插入图片，表格就变形了？_html/css_WEB-ITnose
-
为什么在css里面设置了table样式后，表格内部的细线不显示了？_html/css_WEB-ITnose
-
CSS设置原生table表格边框样式（添加表格横线）
-
怎么知道DIV设置什么CSS属性样式？
-
web打印时需要注意的CSS样式
-
id和class在css中的样式设置的区别是什么？
-
设置表格CSS样式需要注意什么