美文网首页
简写背景 设计表格

简写背景 设计表格

作者: 儿懵 | 来源:发表于2018-10-24 10:08 被阅读0次

    简写背景属性

    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;
    }
    

    相关文章

      网友评论

          本文标题:简写背景 设计表格

          本文链接:https://www.haomeiwen.com/subject/jfczzftx.html