妙味云课堂之css：报表和表单
日期：2014-05-16 浏览次数：20909 次
妙味云课堂之css：表格和表单
一. table表格的基本特性
table 标签基本特性是：display:table;
1、不要给table、th、td 以外的表格标签加样式；
2、单元格默认平分table 的宽度；
3、th里面的内容默认加粗并且左右上下居中显示；
4、td里面的内容默认上下居中左右居左显示；
5、table 决定了整个表格的宽度；
6、table里面的单元格宽度会被转换成百分比；
7、 表格里面的每一列必须有宽度；
8、表格同一竖列继承最大宽度；
9、表格同行继承最大高度；
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
th,td{padding:0;}
table{border-collapse:collapse;}
/* table css reset */
th,td{border:1px solid black; height:50px; width:100px;}
table{width:500px;}
</style>
</head>
<body>
<table><!-- 表格 -->
<tbody>
<tr><!-- 行 -->
<th>表格标题</th>
<th>表格标题</th>
<th>表格标题</th>
<th>表格标题</th>
<th>表格标题</th>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</tbody>
</table>
</body>
</html>
二. 表单样式重置
<style>
form{margin:0;}
input{margin:0;padding:0;}
select{margin:0;}
textarea{margin:0; padding:0;resize:none; overflow:auto; outline:none;}
</style>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
