css中的table

虽然现在都是盒模型的天下，但是还是免不了有表格（table）的用武之地。正是因为我没有经历过表格布局的年代，开始接触布局就被灌输各种盒模型，所以现在捡起来，填补空缺。

初生的table 

<table>
		<tr>
			<th>key</th>
			<th>value</th>
		</tr>
		<tr>
			<td>name</td>
			<td>ever</td>
		</tr>
		<tr>
			<td>sex</td>
			<td>girl</td>
		</tr>
		<tr>
			<td>job</td>
			<td>IT</td>
		</tr>
	</table>

默认的table没有边框没有背景色，字体也没有对齐，唯一看出来了的样式就是<th>的字体加粗且居中。晒张图：

设置table的边框=内边框+外边框

table{
		width: 400px;
		border: 1px solid #1B8EB0;
		text-align: center;
	}

给table添加以上样式不显示内边框，因为table默认的是内边框隐藏，他的属性rules可以设置让内边框显示出来。rules的值分别对应none(隐藏内边框)/all(显示内边框)/cols(显示列边框)/rows(显示行边框)。下面示例：

对应的设置table外边框，如果将

border: 1px solid #1B8EB0;

改成：

border-color: #1B8EB0;

就会发现table默认隐藏外边框。如下：

table外边框属性：frame，其属性值void(外边框隐藏)/border(外边框显示)/hsides(只显示上下外边框)/vsides(只显示左右外边框)/above(上)/below(下)/lhs(左)/rhs(右)

如果要给边框设置不同的颜色，需要通过td单独设置

table td,table th{
		border-bottom: 1px solid #FF4600;
	}

设置table的背景 

table tr:nth-child(even){
		background-color: #9DD8E8;
	}

表格的背景颜色可以给整个table设置，也可以给tr设置或者以上这种分奇数行设置背景色，偶数行设置背景色。

表格宽度设置

只给table设置宽度时，td的宽度会自动分配，但是不是平均分配宽度

table td,table th{
		width: 250px;
	}

给td设置宽度250px发现两列的宽度相等

但是当一列的内容变多时就会放生变化，宽度的设定就不再起作用

解决方法：给table设置绝对宽度，至于td的宽度你可以设置超出隐藏或者换行都可以啦~

table{
		table-layout:fixed ;
	}

table td,table th{
		width: 250px;
		/*自动换行*/
		/*word-wrap:break-word;*/
		/*超出隐藏*/
		/*overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;*/
	}

表格合并

colspan=“2”表示合并2列为一列，rowspan=“2”表示合并2行为一行。

　　　　<table  rules="all" frame="border">
		<tr>
			<th colspan="2">key</th>
		</tr>
		<tr>
			<td rowspan="2">name</td>
			<td>everevereverevereverevereverevereverever</td>
		</tr>
		<tr>
			<td>girl</td>
		</tr>
		<tr>
			<td>job</td>
			<td>IT</td>
		</tr>
	</table>

根据要求自由搭配吧~