怎样用CSS设置table第一列样式

2023-02-21 09:22:02html-css012

怎样用CSS设置table第一列样式,第1张

你编写表格的时候可以这样：

把第一列变成th

，这样就可以方便的控制了。

例如：三行三列的表格可以这样写：

<table>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

或者你可以分别设置不同的类来达到控制的目的。

CSS可以这样写

th{

width:100px

}

td{

width:200px

}

:first-child选择某个元素的第一个子元素；

:last-child选择某个元素的最后一个子元素；

:nth-child()选择某个元素的一个或多个特定的子元素；

:nth-last-child()选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；

:nth-of-type()选择指定的元素；

:nth-last-of-type()选择指定的元素，从元素的最后一个开始计算；

:first-of-type选择一个上级元素下的第一个同类子元素；

:last-of-type选择一个上级元素的最后一个同类子元素；

:only-child选择的元素是它的父元素的唯一一个了元素；

:only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素；

:empty选择的元素里面没有任何内容。

可以参考此样例：

.table{width:100%overflow-x: scrollbackground-color:#7c95b5}.fixedTable{width:160%text-align: centercolor:#ffffont-size:14pxborder-collapse:collapse}.fixedTable tr{line-height: 30pxborder:1px solid #fff}.fixedTable tr:first-child{height:40pxline-height: 40pxbackground-color:cadetblue}.fixedTable td:first-child{position:absolutewidth:105pxbackground-color:cadetblueborder:1px solid #fffmargin:-1px 0px 0px -1px}.fixedColumn{width:99px}

<html>

<head>

<title>使用css固定table第一列</title>

</head>

<body>