表格左边固定并且每一行的高度随内容的变化而变化（纯css）

草木红

已于 2022-03-07 13:34:11 修改

阅读量700

点赞数 1

分类专栏： # HTML CSS 文章标签： css html 前端

于 2022-01-19 21:40:55 首次发布

本文链接：https://blog.csdn.net/kouzuhuai2956/article/details/122590162

版权

HTML CSS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

当页面滚动时，表格左边固定，并且有一个阴影效果，每一行的高度随内容的变化而变化。

position:stickey 会与表格的 border collapse样式冲突，所以使用 box-shadow样式来做表格的边框样式。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      font-size: 12px;
    }

 
    .batch-edit-box {
      width: 100%;
      position: relative;
      overflow-y: hidden;
      margin-top: 20px;
    }

    .sel-box {
      position: relative;
      overflow-x: auto;
      overflow-y: hidden;
      padding-bottom: 79px;
    }

    .sel-box .sel-table {
      min-width: 1200px;
      margin-bottom: 20px;
      width: 100%;
      border-collapse: collapse;
    }

    .sel-box .sel-table thead>tr>th:first-of-type,
    .sel-box .sel-table tbody>tr>td:first-of-type {
      position: sticky;
      left: 0;
      width: 200px;
      min-width: 200px;
      z-index: 2;
      text-align: left;
    }

    .sel-box .sel-table tbody>tr>td:first-of-type span:first-of-type {
      font-weight: bold;
    }


    .sel-box .sel-table thead tr th,
    .sel-box .sel-table tbody tr td {
      position: relative;
      box-shadow: inset -1px -1px 0 0 #ebeef5;
      padding: 6px;
      box-sizing: border-box;
    }

    .sel-box .sel-table thead tr th:first-of-type,
    .sel-box .sel-table tbody tr td:first-of-type {
      box-shadow: inset -1px -1px 0 0 #ebeef5,
        inset 1px 0 0 0 #ebeef5;
    }

    .sel-box .sel-table thead:first-of-type tr th {
      box-shadow: inset -1px -1px 0 0 #ebeef5,
        inset 0 0 0 0 #ebeef5,
        inset 0 1px 0 0 #ebeef5;
      word-break: keep-all;
    }

    .sel-box .sel-table thead:first-of-type tr th:first-of-type {
      box-shadow: inset -1px -1px 0 0 #ebeef5,
        inset 1px 0 0 0 #ebeef5,
        inset 0 1px 0 0 #ebeef5;
      width: 200px;
    }

    .sel-box .sel-table thead tr th,
    .sel-box .sel-table tbody tr td {
      background-color: #fff;
      text-align: left;
    }

    .sel-box .sel-table tbody tr td .selectize-dropdown {
      position: absolute;
      z-index: 4;
      max-height: 100px;
    }

    .sel-box .sel-table tbody tr td .selectize-dropdown .selectize-dropdown-content {
      max-height: 100px;
    }

    .sel-box .sel-table thead:nth-child(2) tr th {
      background-color: #FFF7EE;
      overflow: unset;
    }

    .sel-box .sel-table thead:nth-child(2) tr th:first-child {
      color: #999;
    }

    .sel-box .sel-table thead:nth-child(2) tr th:first-child::after {
      content: '➜';
      display: inline-block;
      padding-left: 5px;
    }

    .batch-edit-box .shade-box {
      position: absolute;
      top: 0;
      bottom: 18px;
      left: 0;
      width: 200px;
      box-shadow: 1px 0 4px #ddd;
      z-index: 3;
    }

    .sel-box .other-shade-box {
      position: absolute;
      height: 117px;
      bottom: -18px;
      background-color: #fff; /*与整体的背景色一致*/
      z-index: 3;
      left: 0;
      right: 0;
      min-width: 1200px;
    }

    .batch-edit-box .sel-table .form-control {
      min-width: 115px;
    }
  </style>
</head>

<body>
  <div class="batch-edit-box">
    <div class="shade-box"></div>

    <div class="sel-box">
      <table class="table-condensed sel-table">
        <thead>
          <tr>
            <th>教学任务</th>
            <th>开课部门</th>
            <th>课程类别</th>
            <th>考核方式</th>
            <th>授课校区</th>
            <th>授课语言</th>
            <th>是否必修</th>
            <th>课程性质</th>
            <th>小项课程</th>
            <th>任务类型</th>
            <th>任务备注</th>
          </tr>
        </thead>
        <thead>
          <tr>
            <th>
              批量修改
            </th>
            <th>
              <select class="form-control selectize" id="" name="valid-sel1">
                <option value="">...</option>
              </select>
            </th>
            <th>
              <select class="form-control selectize" id="" name="valid-sel1">
                <option value="">...</option>
              </select>
            </th>
            <th>
              <select class="form-control selectize" id="" name="valid-sel1">
                <option value="">...</option>
              </select>
            </th>
            <th>
              <select class="form-control selectize" id="" name="valid-sel1">
                <option value="">...</option>
              </select>
            </th>
            <th>
              <select class="form-control selectize" id="" name="valid-sel1">
                <option value="">...</option>
              </select>
            </th>
            <th>
              <select class="form-control selectize" id="" name="valid-sel1">
                <option value="">...</option>
              </select>
            </th>
            <th>
              <select class="form-control selectize" id="" name="valid-sel1">
                <option value="">...</option>
              </select>
            </th>
            <th>
              <select class="form-control selectize" id="" name="valid-sel1">
                <option value="">...</option>
              </select>
            </th>
            <th>
              <select class="form-control selectize" id="" name="valid-sel1">
                <option value="">...</option>
              </select>
            </th>
            <th>
              <select class="form-control selectize" id="" name="valid-sel1">
                <option value="">...</option>
              </select>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <span>课程名称</span>
              <sup>课程小标题</sup>
              <br />
              <span>01020304</span>
              <div style="color: #666">
                主修
              </div>
            <td>
              <select class="selectize">
                <option value="">...</option>
                <option value="1">111111</option>
                <option value="2">w222</option>
                <option value="3">333</option>
                <option value="4">444</option>
                <option value="5">555</option>
                <option value="6">666</option>
                <option value="7">777</option>
                <option value="8">888</option>
                <option value="9">999</option>
              </select>
            </td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
            <td>10</td>
          </tr>
          <tr>
            <td>
              <span>课程名称</span>
              <sup>课程小标题</sup>
              <br />
              <span>01020304</span>
              <div style="color: #666">
                主修
              </div>
            <td>
              <select class="selectize">
                <option value="">...</option>
                <option value="1">111111</option>
                <option value="2">w222</option>
                <option value="3">333</option>
                <option value="4">444</option>
                <option value="5">555</option>
                <option value="6">666</option>
                <option value="7">777</option>
                <option value="8">888</option>
                <option value="9">999</option>
              </select>
            </td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
            <td>10</td>
          </tr>
        </tbody>
      </table>
      <div class="other-shade-box"></div>
    </div>

  </div>

</body>

</html>

草木红

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
表格左边固定并且每一行的高度随内容的变化而变化（纯css）

本例子需要引入bootstrap.css当页面滚动时，表格左边固定，并且有一个阴影效果，每一行的高度随内容的变化而变化。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width
复制链接

扫一扫