【表格】一个固定列宽的表格示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <base target="_blank" /> <title>三十客 - 【表格】一个固定列宽的表格示例</title> <style> .users { table-layout: fixed; width: 100%; white-space: nowrap; } .row-ID { width: 10%; } .row-name { width: 30%; } .row-job { width: 20%; } .row-desc { width: 40%; } .users td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .users th { background: darkblue; color: white; } .users td, .users th { text-align: left; padding: 5px 10px; } .users tr:nth-child(even) { background: lightblue; } </style> </head> <body> <table class="users"> <thead> <tr> <th class="row-1 row-ID">ID</th> <th class="row-2 row-name">姓名</th> <th class="row-3 row-job">职位</th> <th class="row-4 row-desc">描述<th> </tr> </thead> <tbody> <tr> <td>0001</td> <td>毛三十</td> <td>前端工程师</td> <td>这名员工是我所见过的最差劲的前端工程师,没有之一</td> </tr> <tr> <td>0002</td> <td>毛三胖dddddddddddddddddddddddddddddrrrrrrrrddddddddd</td> <td>JAVA程序员</td> <td>一个合格的程序员</td> </tr> </tbody> </table> </body> </html>