html - table 表格不被撐開,td某些列寬度固定某些列自適應


 本文鏈接:http://www.cnblogs.com/jying/p/6289981.html

 

table-layout 屬性的解釋:http://www.w3school.com.cn/cssref/pr_tab_table-layout.asp

 

1,實現table細邊框,設置如下css:

table,table td,table th{border:1px solid #ff0000;border-collapse:collapse;}

 

2,table表格寬度固定,同時td內容過長也不會被撐開,設置如下css:

table{table-layout:fixed;word-break:break-all;}

 

3,在上面css設置下,td的width可以設置固定值也可設置百分比,達到某些列寬度固定,某些列按比例自適應的效果。

<html>
<head>
    <style>
        table,table td,table th{border:1px solid #ff0000;border-collapse:collapse;}
    </style>
</head>
<body>
    <table width="50%" style="table-layout:fixed;word-break:break-all;background:#f2f2f2">
        <tr>
            <td width="50">50px</td>
            <td width="50%">50% aaaaaaabbbbbbbccccccc</td>
            <td width="50%">50% aaaaaaabbbbbbbccccccc</td>
            <td width="50">50px</td>
            <td width="100">100px</td>
        </tr>
        <tr>
            <td>50px</td>
            <td>50% aaaaaaabbbbbbbccccccc</td>
            <td>50% aaaaaaabbbbbbbccccccc</td>
            <td>50px</td>
            <td>100px</td>
        </tr>
    </table>
</body>
</html>

 

效果:

50px 50% aaaaaaabbbbbbbccccccc 50% aaaaaaabbbbbbbccccccc 50px 100px
50px 50% aaaaaaabbbbbbbccccccc 50% aaaaaaabbbbbbbccccccc 50px 100px

  


原文出自:http://www.hangge.com/blog/cache/detail_435.html

 

 

個人小站歡迎來踩:駕校教練評價平台 | 為愛豆砌照片牆

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM