好看实用的Table列表

先上图不说话

这里写图片描述

工作中其实用到表格的地方还是蛮多的。好看又实用的表格就是硬需求。废话不多说，讲讲思路吧，要做成上图的表格其实需要两个table,来模拟成一个table。

注意事项：

第一个table，只有表头，没有表体。可以通过col标签来设置每列的宽度。为了增加美观

我们表头的列数要比表体要多一列，倒数第二列为不设置宽度（当然可以多出一个空列，只为美观）。

这一列设置宽度放在最后一列（宽度为浏览器滚动条的宽度），col的个数要与列数相同。

第二个table，只有标体，没有表头。

为了让表体能够滚动，我们需要在table的外层套一个div并设置div的高度。样式为overflow:atuo;

表体的列数比表头少一列，倒数第二列为不设置宽度（当然可以多出一个空列，只为美观）。

col的个数要与列数相同。

table 设置样式 style=”table-layout:fixed” ，有的地方col便签不能设定宽度，加上这个就ok拉

第一个table

<table style="table-layout:fixed">
 <colgroup>
   <col width="60">
   <col width="220px">
   <col width="">
   <col width="16px">
 </colgroup>
 <thead>
   <tr>
     <th>姓名</th>
     <th>性别</th>
     <th>成绩</th>
     <th></th>
   </tr>
 </thead>
</table >

第二个table

<div style="height:430px;">
  <table  style="table-layout:fixed">
   <colgroup >
     <col width="60">
     <col width="220px">
     <col width="">
   </colgroup>
   <tbody">
     <tr>
       <td>shuah</td>
       <td>男</td>
       <td>100</td>
     </tr>
   </tbody>
 </table>
 </div>

例子

body标签内html代码

<div class="cloudTableAuto">
    <!-- 第一个table -->
    <table class="cloudTable cloudMtxTableHead">
      <colgroup>
        <col width="60">
        <col width="220px">
        <col width="230px">
        <col width="90px">
        <col width="90px">
        <col width="160px">
        <col width="150px">
        <col width="">
        <col width="16px">
      </colgroup>
      <thead class="cloudTable_header">
        <tr>
          <th>序号</th>
          <th>美途秀</th>
          <th>旅游机构</th>
          <th>Pv</th>
          <th>Uv</th>
          <th>活跃产品数(Uv≥20)</th>
          <th>ip</th>
          <th>分享率</th>
          <th style="width: 16px;"></th>
        </tr>
      </thead>
    </table >
    <!-- 第二个table 外层包裹div并设置高度，超出出现滚动条 -->
    <div class="cloudMtxTable_body">
      <table class="cloudTable"  style="table-layout:fixed">
        <colgroup >
          <col width="60">
          <col width="220px">
          <col width="230px">
          <col width="90px">
          <col width="90px">
          <col width="160px">
          <col width="150px">
          <col width="">
        </colgroup>
        <tbody class="cloudTable_body ">
          <tr>
            <td>1</td>
            <td class="data-cell"><span>美途这发的辅导辅导费是我的秀</span></td>
            <td class="data-cell">发的辅导辅导费是我的旅游机构</td>
            <td>323232</td>
            <td>32323232</td>
            <td>3232323</td>
            <td>113.118.186.213</td>
            <td>90%</td>
          </tr>
          <tr>
            <td>1</td>
            <td class="data-cell"><span>美途这发的辅导辅导费是我的秀</span></td>
            <td class="data-cell">发的辅导辅导费是我的旅游机构</td>
            <td>575632</td>
            <td>3738432</td>
            <td>359761</td>
            <td>113.118.186.213</td>
            <td>分享率</td>
          </tr><tr>
            <td>1</td>
            <td class="data-cell"><span>美途这发的辅导辅导费是我的秀</span></td>
            <td class="data-cell">发的辅导辅导费是我的旅游机构</td>
            <td>323232</td>
            <td>32323232</td>
            <td>3232323</td>
            <td>113.118.186.213</td>
            <td>分享率</td>
          </tr><tr>
            <td>1</td>
            <td class="data-cell"><span>美途这发的辅导辅导费是我的秀</span></td>
            <td class="data-cell">发的辅导辅导费是我的旅游机构</td>
            <td>323232</td>
            <td>32323232</td>
            <td>3232323</td>
            <td>113.118.186.213</td>
            <td>分享率</td>
          </tr>
          <tr>
            <td>1</td>
            <td class="data-cell"><span>美途这发的辅导辅导费是我的秀</span></td>
            <td class="data-cell">发的辅导辅导费是我的旅游机构</td>
            <td>323232</td>
            <td>32323232</td>
            <td>3232323</td>
            <td>113.118.186.213</td>
            <td>分享率</td>
          </tr>
          <tr>
            <td>1</td>
            <td class="data-cell"><span>美途这发的辅导辅导费是我的秀</span></td>
            <td class="data-cell">发的辅导辅导费是我的旅游机构</td>
            <td>323232</td>
            <td>32323232</td>
            <td>3232323</td>
            <td>113.118.186.213</td>
            <td>分享率</td>
          </tr>
          <tr>
            <td>1</td>
            <td class="data-cell"><span>美途这发的辅导辅导费是我的秀</span></td>
            <td class="data-cell">发的辅导辅导费是我的旅游机构</td>
            <td>323232</td>
            <td>32323232</td>
            <td>3232323</td>
            <td>113.118.186.213</td>
            <td>分享率</td>
          </tr>
          <tr>
            <td>1</td>
            <td class="data-cell"><span>美途这发的辅导辅导费是我的秀</span></td>
            <td class="data-cell">发的辅导辅导费是我的旅游机构</td>
            <td>323232</td>
            <td>32323232</td>
            <td>3232323</td>
            <td>113.118.186.213</td>
            <td>分享率</td>
          </tr>
          <tr>
            <td>1</td>
            <td class="data-cell"><span>美途这发的辅导辅导费是我的秀</span></td>
            <td class="data-cell">发的辅导辅导费是我的旅游机构</td>
            <td>323232</td>
            <td>32323232</td>
            <td>3232323</td>
            <td>113.118.186.213</td>
            <td>分享率</td>
          </tr>
          <tr>
            <td>1</td>
            <td class="data-cell"><span>美途这发的辅导辅导费是我的秀</span></td>
            <td class="data-cell">发的辅导辅导费是我的旅游机构</td>
            <td>323232</td>
            <td>32323232</td>
            <td>3232323</td>
            <td>113.118.186.213</td>
            <td>分享率</td>
          </tr>
          <tr>
            <td>1</td>
            <td class="data-cell"><span>美途这发的辅导辅导费是我的秀</span></td>
            <td class="data-cell">发的辅导辅导费是我的旅游机构</td>
            <td>323232</td>
            <td>32323232</td>
            <td>3232323</td>
            <td>113.118.186.213</td>
            <td>分享率</td>
          </tr>
          <tr>
            <td>1</td>
            <td class="data-cell"><span>美途这发的辅导辅导费是我的秀</span></td>
            <td class="data-cell">发的辅导辅导费是我的旅游机构</td>
            <td>323232</td>
            <td>32323232</td>
            <td>3232323</td>
            <td>113.118.186.213</td>
            <td>分享率</td>
          </tr>

        </tbody>

      </table>
    </div>
  </div>

表格css样式

  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  .cloudTableAuto{
    width:1200px;
    margin:20px auto;
  }
  .cloudTable{
    border: 1px solid #e0e6ed;
    font-size: 16px;
    width:100%;
  }
  .cloudTableTitle{
    padding:10px 20px;
  }
  .cloudTable td {
    height: 40px;
    min-width: 0px;
    box-sizing: border-box;
    vertical-align: middle;
    position: relative;
    border-bottom: 1px solid #e0e6ed;
  }
  /*  表头 */
  .cloudTable_header tr {
    background-color: #efeff1;
  }
  .cloudTable_header th {
    min-width: 0;
    box-sizing: border-box;
    text-overflow: ellipsis;
    vertical-align: middle;
    position: relative;
    border-bottom: 1px solid #e0e6ed;
    border-right: 1px solid #e0e6ed;
    padding: 10px 0px;
    white-space: nowrap;
    overflow: hidden;
    font-weight: bold;
    text-align: -internal-center;
  }

  /* 表身体 */
  .cloudTable_body tr td {
    height: 40px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  }
  .cloudTable_body tr td {
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    border-right: 1px solid #e0e6ed;
  }
  .cloudMtxTable_body{
    /*height:102px;*/
    height:402px;
    width:100%;
    overflow-y: auto;
    border-bottom: 1px solid #e0e6ed;
  }

  /* 公用样式 */
  .data-cell {
    padding-left: 15px;
    padding-right: 15px;
    font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  }
  .cloudTable_body tr:hover {
    background-color: #c5e8fe;
  }

ok了，不说废话了，自己去试一下吧。

好看实用的Table列表

先上图不说话

注意事项：

例子

body标签内html代码

表格css样式

猜你喜欢