table表格的总结

/*表格样式*/
.table {
        color:#555;
        font-size: 14px;
        border-collapse: collapse;//单元格间没有间距
        border:1px solid #e6e6e6;
}
.table caption{
        font: bold 18px/2em "微软雅黑";
}
.thead{
        line-height: 40px;
        background:#f4f4f4; 
}
.table input[type="checkbox"]{
        margin:0 5px 0 0;
        vertical-align: middle;
        margin-top:-4px;
        *margin-top:-2px;
}
.table td{
        padding:7px 5px; 
        border:1px solid #e6e6e6;
}
除火狐与360极速浏览器外，其它浏览器设置table的边框颜色，均不能影响td的边框
ie7下，table的边框不会被th，td的边框颜色覆盖

表格设置宽度后，大多会自动换行，
但加入white-space: nowrap;让表格内容过多实现省略号的样式，会出发表格默认的table-layout:auto;样式，会超出表格，需要加上table-layoue:fixed;
.table{
        table-layout:fixed;
}
.table
td{
        white-space: nowrap;  
        overflow: hidden;
        text-overflow: ellipsis;
}

border-spacing:0;其作用等同于标签属性cellspacing(单元格边距)。border-spacing:0等同于cellspacing="0"
只有当表格边框独立（即border-collapse：separate时）此属性才起作用。
如果提供全部两个length值时，第一个作用于横向间距，第二个作用于纵向间距。
所以将table设置为border-collapse: collapse;后，无需加border-spacing:0;
我们可以利用这一属性为单元格里的内容增加间距，并且不会增加table的宽度，与padding不同，但可惜的是ie7不支持

th默认文本加粗,默认居中
td默认局左

html

<table width="100%" class="table">
<caption>表格标题</caption>
<thead class="thead">
     <tr>
        <th class="tnum">类名</th>
        <th>类名</th>
        <th>类名</th>
        <th>类名</th>
        <th>类名</th>
        <th>类名</th>
      </tr>
</thead>
<tbody>
  <tr>
    <td>
            <input name="" type="checkbox" value="" />1
    </td>
    <td>二维码</td>
    <td>二维码二维码二维码二维码二维码二维码二维码二维码二维码二维码二维码二维码二维码</td>
    <td>二维码</td>
    <td class="tc">2012-12-13</td>
    <td class="tc">二维码</td>
  </tr>
  <tr>
    <td>
            <input name="" type="checkbox" value="" />2
    </td>
    <td>二维码</td>
    <td>二维码二维码二维码二维码二维码二维码二维码二维码二维码二维码二维码二维码二维码</td>
    <td>二维码</td>
    <td class="tc">2012-12-13</td>
    <td class="tc">二维码</td>
  </tr>
  <tr>
    <td>
            <input name="" type="checkbox" value="" />3
    </td>
    <td>二维码</td>
    <td>二维码二维码二维码二维码二维码二维码二维码二维码二维码二维码二维码二维码二维码</td>
    <td>二维码</td>
    <td class="tc">2012-12-13</td>
    <td class="tc">二维码</td>
  </tr>
  <tr>
    <td>
            <input name="" type="checkbox" value="" />4
    </td>
    <td>二维码</td>
    <td>二维码二维码二维码二维码二维码二维码二维码二维码二维码二维码二维码二维码二维码</td>
    <td>二维码</td>
    <td class="tc">2012-12-13</td>
    <td class="tc">二维码</td>
  </tr>
  <tr>
    <td>
            <input name="" type="checkbox" value="" />5
    </td>
    <td>二维码</td>
    <td>二维码二维码二维码二维码二维码二维码二维码二维码二维码二维码二维码二维码二维码</td>
    <td>二维码</td>
    <td class="tc">2012-12-13</td>
    <td class="tc">二维码</td>
  </tr>
</tbody>
</table>