table、table-layout表格样式美化、等分、非等分、单元格内容超出处理

时间 2019-11-20

标签 table layout 表格样式美化等分非等单元格内容超出处理繁體版

原文原文链接

<!--
           table元素上设置 cellspacing="0" cellpadding="0"便可
           colspan 横向单元格合并
           rowspan 纵向单元格合并

           背景色操做tr 其余样式建议全操做th或td
           td里若有input空间记得脱离文档流更好控制css

.mytable th, .mytable td { border: 1px solid #35a1fb; }　　　　

.clearBorderTop td { border-top: none;}

.clearBorderTop td+td { border-left: none;}

-->html

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
        <style>
            *{
                margin: 0;padding: 0;
            }
            input{
                margin: 0;
                padding: 0;
                border: none;
            }
            .mytable {
                width: 600px;
                margin: 0 auto;
                background: #fff;
            }
            
            .mytable tr th {
                color: #877474;
                font-size: 14px;
                padding: 6px 0;
                background: #e3e4e8;
            }
            
            .mytable th,
            .mytable td {
                border: 1px solid #35a1fb;
            }
            
            .mytable tr td input[type="checkbox"] {
                display: block;
                float: left;
                margin-top: 4px;
                margin-left: 3px;
            }
            
            .clearBorderTop td {
                border-top: none;
                padding: 4px 0;
                font-size: 12px;
                color: #726262;
            }
            
            .clearBorderTop td+td {
                border-left: none;
            }
            
            .clearBorderTop.noBacolor {
                background: #f5f5f5;
            }
            
            .select-btn,
            .noSelect-btn {
                padding: 3px 6px;
                background: #35a1fb;
                color: #fff;
                margin: 3px 10px;
                font-size: 12px;
            }
        </style>
    </head>

    <body>
    
        <table class="mytable" cellspacing="0" cellpadding="0">
            <tr>
                <th colspan="5">请选择须要统计的项目</th>
            </tr>
            <tr class="clearBorderTop">
                <td>
                    <input type="checkbox" />
                    <span>基本工资</span>
                </td>
                <td>
                    <input type="checkbox" />
                    <span>基本工资</span>
                </td>
                <td>
                    <input type="checkbox" />
                    <span>基本工资</span>
                </td>
                <td>
                    <input type="checkbox" />
                    <span>基本工资</span>
                </td>
                <td>
                    <input type="checkbox" />
                    <span>基本工资</span>
                </td>
            </tr>
            <tr class="clearBorderTop noBacolor">
                <td>
                    <input type="checkbox" />
                    <span>基本工资</span>
                </td>
                <td>
                    <input type="checkbox" />
                    <span>基本工资</span>
                </td>
                <td></td>
                <td></td>
                <td class="lastTd"></td>
            </tr>
            <tr class="clearBorderTop">
                <td class="lastTd2" colspan="5">
                    <input class="select-btn" type="button" name="" id="" value="全选" />
                    <input class="noSelect-btn" type="button" name="" id="" value="全不选" />
                </td>
            </tr>
        </table>
    </body>

</html>

2.table-layout: fixed表格测试

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
    <meta charset="UTF-8"/>
    <style type="text/css">  
.mytable {  
    table-layout: fixed; 
    width:800px; 
    margin: 0 auto;
}  

.mytable tr td {  
    text-overflow: ellipsis;
    -moz-text-overflow: ellipsis;
    overflow: hidden;  
    white-space: nowrap; 
    border: 1px solid; 
    text-align: center; 
    padding: 10px 0;
} 
.mytable tr:nth-of-type(1) td{
    border-bottom: none;
}
.mytable tr td+td{
    border-left: none;
} 
</style>  
</head>  
<body>  
    <!--
        http://blog.csdn.net/bsh_csn/article/details/51829103
        不加：table-layout: fixed;
            不加同一行单元格不会等分
            内容少不影响
             内容增多不会换行,会增长本身的宽度，会挤压其余单元格的宽度
                 添加<br/>能够换行
                     可是会破坏同一行单元格的高度
             
         
        加了：table-layout: fixed;
            加了同一行单元格会等分
            内容少不影响
            内容增多会换行 ，不会增长本身的宽度， 不会挤压其余单元格宽度了，会破坏同一行单元格的高度
                     添加四个css样式可阻止换行 超出隐藏
             
            还能够单独设置某个单元格的宽度(加在第一行，加在第二行的单元格没效果仍是会等分！)，其余等分
    -->
    <h3  style="text-align: center;"> table-layout: fixed表格</h3>
    <table  class="mytable" cellspacing="0" cellpadding="0">  
        <tr>  
            <td >测试</td> 
            <td width="20%">测试测试测试测试测试测试测试测试测试</td> 
            <td width="40%">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试123123</td>  
            <td >测试</td> 
            <td >测试</td> 
        </tr>
          <tr>  
            <td >测试</td> 
            <td >测试测试测试测试测试测试测试测试测试</td> 
            <td >测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试123123</td>  
            <td >测试</td> 
            <td >测试</td> 
        </tr> 
    </table>  
</body>  
</html>