CS⊙ω⊙S完成报表首行第一列固定不动和响应式对

2021-03-24 06:25 jianzhan

今日校招笔试题目题规定完成一个首行第一列固定不动,总宽响应式对话框转变,但对话框变小到一定总宽不可以再变小,出現水准翻转条…
那时候我写不对,我一时想不了改成甚么方法首行第一列固定不动,用肯定精准定位,爸爸相对性精准定位…那样会出现许多难题要处理…
因此回家我学了一下,之前实例教程没学过这种特性,涨专业知识了嘿嘿…

先掌握好多个定义:

table-layout:

table-layout特性有二种特殊值:
auto(预置值)-报表的总总宽决策每个存储格(cell)的较大值
fixed - 报表的总总宽决策于报表width的界定,及其各栏位(column)width的界定, 沒有界定总宽就均分报表总宽。
报表总宽根据报表的总宽来设定,某一列的总宽仅由该列首行的模块格决策,别的行模块格的总宽不容易危害整列的总宽。
留意:自定总宽要界定在首例模块格才合理果(th)

position : sticky

黏性精准定位能够被觉得是相对性精准定位和固定不动精准定位的混和。原素在超越特殊阀值前为相对性精准定位,以后为固定不动精准定位。
在总体目标地区中由此可见时,他的个人行为如同relative 不容易有一切转变,而当网页页面翻转超过总体目标地区时,他的主要表现改成fixed会固定不动于总体目标部位
sticky原素会“固定不动”在离它近期的一个有着“翻转体制”的先祖上(当该先祖的overflow是hidden、scroll、auto、overlay时), 就算这一先祖并不是近期的真正可翻转先祖。
要留意的是当position : sticky运用于table,只有功效于th和td,功效tr沒有实际效果,而且一定要界定总体目标部位 left / right / top / bottom 才会出現固定不动实际效果!

完成:

1.响应式
报表业务外包一层div,总宽100% ,外溢出現翻转条

.box {
      width: 100%;
      height: 200px;
      background-color: #eee;
      overflow: auto;
       margin: 10px;
    }

报表table, 总宽100%, 设定一个最少总宽,我这儿设定1000px,这一依据本人设置哈

table {
      width: 100%;
      min-width: 1000px;
       /* 自定总宽要设定成fixed */
      table-layout: fixed;
      /* 设定模块格间隔 */
      border-spacing:0;
    }

2.固定不动首行第一列
必须在首行th 和第一列设定黏性精准定位
首行设定

thead tr th {
      /* th设定黏性精准定位 */
      background-color: pink;
      position: sticky;
      top: 0;
        /* 顶端border */
        border-top: 1px solid black;
    }

第一列设定

 td:first-child {
      /* td第一个黏性精准定位 */
      position: sticky;
      left: 0;
      background-color: skyblue;
    }

假如必须更改模块格总宽,必须设定table-layout: fixed
这一特性设定了默认设置模块格均分table总宽,假如第一列第一个模块格(th)设定了固定不动总宽200px,那麼这列总宽便是200px
留意是第一个模块格

td:first-child,th:first-child {
         /* 设定第一列200 ,设定th才合理,这儿再加td关键是以便设定Border*/
         width: 200px;
         border-left: 1px solid black;
    }

也有一个留意地区是 外框border,要独立设置每一个模块格外框border, 假如border collapse,翻转会跟随动,实际效果不太好看。

总体编码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .box {
      width: 100%;
      height: 200px;
      background-color: #eee;
      overflow: auto;
      margin: 10px;
    }
    table {
      width: 100%;
      min-width: 1000px;
       /* 自定总宽要设定成fixed */
      table-layout: fixed;
      /* 设定模块格间隔 */
      border-spacing:0;
    }
    
    td,th {
      border-bottom: 1px solid black;
      border-right: 1px solid black;
      box-sizing: border-box;
      /* 超过长短显示信息 ... */
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    td:first-child,th:first-child {
         /* 设定第一列200 ,设定th才合理*/
         width: 200px;
         border-left: 1px solid black;
    }
    /* 假如border collapse,翻转会跟随动,因此独立给每一个原素设定border */
    td:last-child, th:last-child {
      border-right: 1px solid black;
    }
    th:last-child, td:last-child {
      border-right: 1px solid black;
    }
    .last td {
      /* 最终一行底端border */
      border-bottom: 1px solid black;
    }
    
    thead tr th {
      /* th设定黏性精准定位 */
      background-color: pink;
      position: sticky;
      top: 0;
        /* 顶端border */
        border-top: 1px solid black;
    }
   
    td:first-child {
      /* td第一个黏性精准定位 */
      position: sticky;
      left: 0;
      background-color: skyblue;
    }
    thead tr th:first-child {
      /* 第一个因为要维持左右和上下翻转也不被遮盖,设定在最上边 */
      z-index: 1;
      left: 0;
    }
  </style>
</head>


<body>
  <div class="box">
  <table  >
    <thead>
      <tr>
      <th>名字</th>
      <th>学籍号</th>
      <th>年纪</th>
      <th>考试成绩</th>
      <th>喜好</th>
    </tr>
    </thead>
    <tbody>
      <tr>
        <td>可口可乐1</td>
        <td>可口可乐11111111</td>
        <td>可口可乐222222222</td>
        <td>可口可乐333333333333333333333333333</td>
        <td>可口可乐</td>
      </tr>
      <tr>
        <td>可口可乐</td>
        <td>可口可乐</td>
        <td>可口可乐</td>
        <td>可口可乐</td>
        <td>可口可乐</td>
      </tr>
      <tr>
        <td>可口可乐</td>
        <td>可口可乐</td>
        <td>可口可乐</td>
        <td>可口可乐</td>
        <td>可口可乐</td>
      </tr>
      <tr>
        <td>可口可乐</td>
        <td>可口可乐</td>
        <td>可口可乐</td>
        <td>可口可乐</td>
        <td>可口可乐</td>
      </tr>
      <tr>
        <td>可口可乐</td>
        <td>可口可乐</td>
        <td>可口可乐</td>
        <td>可口可乐</td>
        <td>可口可乐</td>
      </tr>
      <tr>
        <td>可口可乐</td>
        <td>可口可乐</td>
        <td>可口可乐</td>
        <td>可口可乐</td>
        <td>可口可乐</td>
      </tr>
      <tr>
        <td>可口可乐</td>
        <td>可口可乐</td>
        <td>可口可乐</td>
        <td>可口可乐</td>
        <td>可口可乐</td>
      </tr>
      <tr>
        <td>可口可乐</td>
        <td>可口可乐</td>
        <td>可口可乐</td>
        <td>可口可乐</td>
        <td>可口可乐</td>
      </tr>
      <tr>
        <td>可口可乐</td>
        <td>可口可乐</td>
        <td>可口可乐</td>
        <td>可口可乐</td>
        <td>可口可乐</td>
      </tr>
      <tr>
        <td>可口可乐</td>
        <td>可口可乐</td>
        <td>可口可乐</td>
        <td>可口可乐</td>
        <td>可口可乐</td>
      </tr>
      <tr>
        <td>可口可乐</td>
        <td>可口可乐</td>
        <td>可口可乐</td>
        <td>可口可乐</td>
        <td>可口可乐</td>
      </tr>
      <tr>
        <td>可口可乐</td>
        <td>可口可乐</td>
        <td>可口可乐</td>
        <td>可口可乐</td>
        <td>可口可乐</td>
      </tr>
      <tr class="last">
        <td>可口可乐</td>
        <td>可口可乐</td>
        <td>可口可乐</td>
        <td>可口可乐</td>
        <td>可口可乐</td>
      </tr>
    </tbody>
  </table>
</div>
</body>
</html>

实际效果:(做的还并不是非常好,再次给油)

到此这篇有关CSS完成报表首行第一列固定不动和响应式对话框的案例编码的文章内容就详细介绍到这了,大量有关css完成报表首行第一列固定不动內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!