简写背景 设计表格

简写背景属性

background:颜色 图片路径 居中 不重复 固定 (没有 顺序和数量要求 没设置的就使用默认值)
执行下边的 background写下边 会给上边的background-color 覆盖

网页中设计表格

th 表头便签 居中 加粗
tr 行 不是table的直接后代 是孙子
td 列

style type=text/css
  table{
    margin:0 auto;
    width:300px;
    barder:1px slid black;
    border-spacing:0px; 没有间距 一条线 两像素 合并
    border-collapse:collapse;一像素 只留td边框 边框合并  td的边框就失效了 没有意义了
}
th,td{
    border:1px solid black
} 都给设上
表格的标签
<table> 
    <tr> 代表行
        <td >代表列A1</td>
        <td rowspan=2>A2</td>纵向合并2个
    </tr>  
</table>

设置背景

ie8不支持 需要兼容的 ie9以上的都支持
给奇数行的设置颜色 even偶数c
  tr:nth-child(odd){
    background-color:#f5f5f5
}

鼠标移入变颜色

ie6不好使 ie9以上的都支持
tr:hover{
   background-color:yellow
}

长表格 表头 主体 底部

<table>  
     <thead>
        <tr>
            <th>薪资</th>
        </tr>
    <thead>
    <tbody>
        <tr>
            <td>80000</td>
        </tr>
    <tbody>
    <tfoot>
        <tr
            <td></td>
            <td></td>
            <td>剩余</td>
        <tr>
    <tfoot>
<table>

设置宽高

    <table border="1" width="100%">
        <tr height="100px">
            <td></td>
        </tr>
        <tr height="500px">
            <td></td>
        </tr>
        <tr height="100px">
            <td></td>
        </tr>
    </table>

表格可以嵌套的
td 里可以在加表格的 可以一给嵌套的表格在设置宽 高

完善

父子元素重叠 外边距重叠

.box1:before{
    content:" ";
    display:table;
    clear:both;
}
高度塌陷
.clearfix:after{
    content:" ";
    display:table;
    clear:both;
}