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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。