Good-looking and practical Table list

First picture without talking

write picture description here

In fact, there are many places where forms are used in work. A good-looking and practical form is a hard requirement. Not much nonsense, let’s talk about ideas. To make the table above, we actually need two tables to simulate a table.

Precautions:

The first table has only the header and no body. The width of each column can be set through the col tag. To add beauty

The number of columns in our table header is one more column than the table body, and the penultimate column does not set the width (of course, we can add an empty column, just for aesthetics).

The width of this column is set in the last column (the width is the width of the browser scroll bar), and the number of cols should be the same as the number of columns.

The second table, only the body, no header.

To make the table body scrollable, we need to wrap a div around the table and set the height of the div. The style is overflow:atuo;

The number of columns in the table body is one less than that in the table header, and the second-to-last column does not have a width (of course, one more empty column can be added, just for aesthetics).

The number of cols should be the same as the number of columns.

The table sets the style style=”table-layout:fixed”, and in some places the col note cannot be set to the width, and this is ok to pull

first 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 >

the second 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>

example

html code inside the body tag

<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>

table css style

  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, stop talking nonsense, try it yourself.