天猫仿站：3分类页面——排序和价格

分类页面之排序和价格页面的布局。

预览地址

1. HTML结构

<table class="categorySortBarTable categorySortTable">
   <tbody>
      <tr>
         <td class="grayColumn"><a href="#">综合<span class="glyphicon glyphicon-arrow-down"></span></a></td>
         <td><a href="#">人气<span class="glyphicon glyphicon-arrow-down"></span></a></td>
         <td><a href="#">新品<span class="glyphicon glyphicon-arrow-down"></span></a></td>
         <td><a href="#">销量<span class="glyphicon glyphicon-arrow-down"></span></a></td>
         <td><a href="#">价格<span class="glyphicon glyphicon-resize-vertical"></span></a></td>
      </tr>
   </tbody>
</table>
<table class="categorySortBarTable">
   <tbody>
      <tr>
         <td><input type="text" placeholder="请输入" class="sortBarPrice beginPrice"></td>
         <td class="grayColumn priceMiddleColumn">-</td>
         <td><input type="text" placeholder="请输入" class="sortBarPrice endPrice"></td>
      </tr>
   </tbody>
</table>

2. 表格布局

要实现上述效果中显示的，使排序项排列在一行，有多种方式，如float，inline，inline-block。
此处，我们要实现的效果不仅是排列在一行，此外每个排序项还需要边框，倘若不使用表格来做，而是使用span的border样式来做边框，那么相邻的两个span的边框会挨再一起，就是二倍宽度，看上去过粗。 为了解决过粗的问题，需要对每个span进行仅仅设置左边框，或者右边框，显而易见，此时增加了设置样式的复杂度。而使用table，只需要为td设置border边框，就可以达到效果。 容易很多，维护起来也更简单。

table.categorySortBarTable {
   border-collapse: collapse;  /*单元格之间没有空隙*/
   display: inline-block;      /*显示为内联，既可以设置大小，又能够不换行*/
}
table.categorySortBarTable td {
   height: 17px;
   font-size: 12px;
   border: 1px solid #ccc;
   padding: 3px;
}

关于border-collapse属性：
border-collapse: separate(默认,边框分隔) | collapse(边框合并)

<style>
table.t1{
   border-collapse:separate;
} 
table.t2{
   border-collapse:collapse;
}
</style>
<table class="t1" border="1" width="200px">
   <tr>
      <td width="50%">边框分离</td>
      <td width="50%">边框分离</td>
   </tr>
</table>
<br/>
<br/>
<table class="t2" border="1" width="200px">
   <tr>
      <td width="50%">边框合并</td>
      <td width="50%">边框合并</td>
   </tr>
</table>

预览