CSS表格设置

css表格属性可以极大的改善表格的外观
表格边框
  • 在css中设置表格边框，使用border属性。
  • 为table，th以及td设置蓝色边框👇
<html>
	<head>
		<style type="text/css">
			table,th,td{
				border:1px solid blue;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<th>男性</th>
				<th>女性</th>
			</tr>
			<tr>
				<td>蓝拳</td>
				<td>芙蕾雅</td>
			</tr>
			<tr>
				<td>狂战士</td>
				<td>花花</td>
			</tr>
		</table>
	</body>
</html>

👇运行结果👇

css 设置element的表格高度 css怎么设置表格宽度_html

  • 上例中的表格具有双线条边框。这是由于table，th以及td元素都有独立的边框。
  • 如果需要把表格显示为单线条，则需要使用border-collapse属性。
折叠边框
  • border-collapse属性设置是否将表格边框折叠为单一边框
<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
			table{
				border-collapse:collapse;
  			}
  			
			table, td, th{
  				border:1px solid blue;
  			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<th>男性</th>
				<th>女性</th>
			</tr>
			<tr>
				<td>蓝拳</td>
				<td>芙蕾雅</td>
			</tr>
			<tr>
				<td>狂战士</td>
				<td>花花</td>
			</tr>
		</table>
	</body>
</html>

👇运行结果👇

css 设置element的表格高度 css怎么设置表格宽度_css_02

border-collapse
  • JavaScript语法👇
object.style.borderCollapse="collapse"

值

描述

spearate

默认值。边框会被分开。不会忽略border-spacing和empty-cells属性

collapse

如果可能，边框会合并为一个单一的边框。会忽略border-spacing和empty-cells属性

inherit

规定应该从父元素继承border-collapse属性的值

表格宽度和高度
  • 通过width和height属性定义表格的宽度和高度。
table{
  width:100%;
}

th{
  height:50px;
}
表格文本对齐
  • text-align和vertical-align属性设置表格中文本的对齐方式
  • text-align属性设置水平文本对齐方式，比如左对齐，右对齐或者居中对齐
  • vertical-align属性设置垂直对齐方式，比如顶部对齐，底部对齐或者居中对齐
表格内边距
  • 如需控制表格中内容与边框的距离，请为td和th元素设置padding属性。
表格颜色
  • 如需控制表格的颜色请分别为table，td和th设置border（边框颜色），background-color（背景颜色）和color（文字颜色）

属性

描述

值

border-collapse

设置是否把表格边框合并为单一的边框

separ——默认。边框会被分开

collapse——边框会被合并为一个单一的边框

border-spacing

设置分隔单元格边框的距离

(仅用于“分离边框”模式)

两个长度——前者对应水平间距，后者对用垂直

一个长度——定义水平和垂直的间距

caption-side

设置表格标题的位置

top——默认值。把标题定位在表格之上

bottom——把表格定位在表格之下

empty-cells

设置是否显示表格中的空单元格

仅用于“分离边框”模式

hide——不在空单元格周围绘制边框

show——默认值。在空单元格周围绘制边框

table-layout

设置显示单元，行和列的规则

automatic——默认值。列宽度由单元格内容设定

fixed——规定由表格宽度，列宽度等规定设定