固定表格布局

来源：互联网发布：熊猫智能采集软件编辑：程序博客网时间：2024/05/01 10:41

css:

    table{
        table-layout:fixed;
    }
    .r{
        border-right:solid 0.1px gainsboro;
    }
    .b{
        border-bottom:solid 0.1px gainsboro;
   }

html:

   <table cellpadding="0" cellspacing="0" style="border:solid 0.1px gainsboro;width:400px;">
   <thead>
   <tr height="40px">
    <th class="r b" style="width:75px">ID</th>
    <th class="r b" style="width:200px">Name</th>
    <th class="r b" style="width:70px">Job</th>
    <th class="b" style="width:55px">Email</th>
   </tr>
  </thead>
  <tbody>
   <tr height="40px">
    <td class="r b" style="width:75px">0001</td>
    <td class="r b" style="width:75px">Johnny Five</td>
    <td class="r b" style="width:75px">Robotin'</td>
    <td class="b" style="width:75px">need@input.com</td>
   </tr>
   <tr height="40px">
    <td class="r" style="width:75px">0002</td>
    <td class="r" style="width:75px">Super Superlonglastnamesmith</td>
    <td class="r" style="width:75px">Doin' stuff</td>
    <td style="width:75px">doing@stuff.com</td>
   </tr>
  </tbody>
</table>

阅读全文

0 0