纯css设置table表格样式简单方法

纯css设置table表格样式简单示例，直接粘来用，提高切页面效率，还可以扩展。

在做表格样式的时候每次都要去重复的写样式，弄得标签和css乱七八糟，还有一些基础差的同学连css属性和标签属性都记不住每次都需要查找资料，用纯css设置table表格基本样式，直接粘来用，提高切页面效率，还可以扩展。

table单元格都是td时，基本css样式：

<style>
  /***table单元格都是td时，基本样式***/
  .tableTd{border:0;margin:0;border-collapse:collapse;}
  .tableTd td{border:1px solid #ccc;padding:5px 10px;}
  .tableTd td{border-top:none;border-left:none;}
  .tableTd td:first-child{border-left:1px solid #ccc;}
  .tableTd tr:first-child td{border-top:1px solid #ccc;}
</style>

table单元格表头为th其他都是td时，基本css样式：

<style>	
  /***table表头单元格为th其他行为td时，基本样式***/
  .tableThTd{border:0;margin:0;border-collapse:collapse;}
  .tableThTd td,.tableThTd th{border:1px solid #ccc;padding:5px 10px;}
  .tableThTd th{border-left:none;}
  .tableThTd th:first-child{border-left:1px solid #ccc;}
  .tableThTd td{border-top:none;border-left:none;}
  .tableThTd td:first-child{border-left:1px solid #ccc;}
</style>

html中直接在table标签中加入样式class即可。

全是td的表格：

<table class="tableTd">
  <tr>
    <td>编码</td>
    <td>姓名</td>
    <td>手机</td>
    <td>邮箱</td>
  </tr>
  <tr>
    <td>1</td>
    <td>小红</td>
    <td>13145678910</td>
    <td>131@qq.com</td>
  </tr>
  <tr>
    <td>2</td>
    <td>小明</td>
    <td>15145678910</td>
    <td>151@qq.com</td>
  </tr>
</table>

表头带th的表格：

<table class="tableThTd">
  <tr>
    <th>编码</th>
    <th>姓名</th>
    <th>手机</th>
    <th>邮箱</th>
  </tr>
  <tr>
    <td>1</td>
    <td>小红</td>
    <td>13145678910</td>
    <td>131@qq.com</td>
  </tr>
  <tr>
    <td>2</td>
    <td>小明</td>
    <td>15145678910</td>
    <td>151@qq.com</td>
  </tr>
</table>

后续扩展更多表格样式，请耐心等待。