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(to left, white 50%, rgba(255, 255, 255, 0) 100%);
          background-repeat: no-repeat;
          background-position: 100% 0;
          background-size: 20px 100%;
        }
        
        .rtable th {
          font-size: 11px;
          text-align: left;
          text-transform: uppercase;
          background: #f2f0e6;
        }
        
        .rtable th,
        .rtable td {
          padding: 6px 12px;
          border: 1px solid #d9d7ce;
        }
        
        .rtable--flip {
          display: flex;
          overflow: hidden;
          background: none;
        }
        
        .rtable--flip thead {
          display: flex;
          flex-shrink: 0;
          min-width: -webkit-min-content;
          min-width: -moz-min-content;
          min-width: min-content;
        }
        
        .rtable--flip tbody {
          display: flex;
          position: relative;
          overflow-x: auto;
          overflow-y: hidden;
        }
        
        .rtable--flip tr {
          display: flex;
          flex-direction: column;
          min-width: -webkit-min-content;
          min-width: -moz-min-content;
          min-width: min-content;
          flex-shrink: 0;
        }
        
        .rtable--flip td,
        .rtable--flip th {
          display: block;
        }
        
        .rtable--flip td {
          background-image: none !important;
          border-left: 0;
        }
        
        .rtable--flip th:not(:last-child),
        .rtable--flip td:not(:last-child) {
          border-bottom: 0;
        }
        
        /*!
        // CodePen house keeping
        */
        body {
          margin: 0;
          padding: 25px;
          color: #494b4d;
          font-size: 14px;
          line-height: 20px;
        }
        
        h1, h2, h3 {
          margin: 0 0 10px 0;
          color: #1d97bf;
        }
        
        h1 {
          font-size: 25px;
          line-height: 30px;
        }
        
        h2 {
          font-size: 20px;
          line-height: 25px;
        }
        
        h3 {
          font-size: 16px;
          line-height: 20px;
        }
        
        table {
          margin-bottom: 30px;
        }
        
        a {
          color: #ff6680;
        }
        
        code {
          background: #fffbcc;
          font-size: 12px;
        }
    </style>



</head>

<body>
    <h1>CSS only Responsive Tables</h1>
    <h2>Basic overflow:</h2>

    <table class="rtable">
        <thead>
            <tr>
                <th>Browser</th>
                <th>Sessions</th>
                <th>Percentage</th>
                <th>New Users</th>
                <th>Avg. Duration</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Chrome</td>
                <td>9,562</td>
                <td>68.81%</td>
     .........完整代码请登录后点击上方下载按钮下载查看