css实现一个自适应table表格效果代码-html代码-BFW代码库

css实现一个自适应table表格效果代码

代码语言：html

所属分类：表格

代码描述：css实现一个自适应table表格效果代码，可以固定头部和设置横向还是纵向。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">




    <style>
    body{
        background: white;
    }
        .rtable {
          /*!
          // IE needs inline-block to position scrolling shadows otherwise use:
          // display: block;
          // max-width: min-content;
          */
          display: inline-block;
          vertical-align: top;
          max-width: 100%;
          overflow-x: auto;
          white-space: nowrap;
          border-collapse: collapse;
          border-spacing: 0;
        }
        
        .rtable,
        .rtable--flip tbody {
          -webkit-overflow-scrolling: touch;
          background: radial-gradient(left, ellipse, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center, radial-gradient(right, ellipse, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;
          background-size: 10px 100%, 10px 100%;
          background-attachment: scroll, scroll;
          background-repeat: no-repeat;
        }
        
        .rtable td:first-child,
        .rtable--flip tbody tr:first-child {
          background-image: linear-gradient(to right, white 50%, rgba(255, 255, 255, 0) 100%);
          background-repeat: no-repeat;
          background-size: 20px 100%;
        }
        
        .rtable td:last-child,
        .rtable--flip tbody tr:last-child {
          background-image: linear-gradient(.........完整代码请登录后点击上方下载按钮下载查看