html - Sticky 和 first 在移动设备和桌面设备上

Question

我正在尝试调整这个:

https://codepen.io/adrianjacob/full/KdVLXY使表头和表的第一行在移动和桌面设备的滚动条上“粘滞”。

我在 CSS 中完成了这个:

thead th { 
position: sticky; 
top: 0;
}

和

tbody tr:first-child td { 
position: sticky; 
top: 50px;
background:white;
}

为了在我需要的地方获得“粘性”，但我的“thead”没有出现在移动设备上，首先显示“tr”并且它在移动设备和桌面设备上都是粘性的。

我还需要“头”上方的那些彩色线条来显示并保持粘性。感谢您提供的任何帮助。

Answer 1

我制作了彩色线条作为伪元素，并添加到 ul position:sticky 中，这就是所缺少的 ;)

// DIRTY Responsive pricing table JS

$( 'ul' ).on( 'click', 'li', function() {
  let pos = $(this).index()+2;
  $('tr').find('td:not(:eq(0))').hide();
  $('td:nth-child('+pos+')').css('display','table-cell');
  $('tr').find('th:not(:eq(0))').hide();
  $('li').removeClass('active');
  $(this).addClass('active');
});

// Initialize the media query
let mediaQuery = window.matchMedia('(min-width: 640px)');
  
// Add a listen event
mediaQuery.addListener(doSomething);
  
// Function to do something with the media query
function doSomething(mediaQuery) {    
  if (mediaQuery.matches) {
    $('.sep').attr('colspan',5);
  } else {
    $('.sep').attr('colspan',2);
  }
}
  
// On load
doSomething(mediaQuery);

/* DIRTY Responsive pricing table CSS */

/* 
- make mobile switch sticky
*/
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: 0;
}

body {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  padding: 14px;
}

article {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  height: 1000px;
  position: relative;
}

ul {
  display: flex;
  position: sticky;
  top: 0px;
  z-index: 10;
  padding-bottom: 14px;
}

li {
  list-style: none;
  flex: 1;
  position: relative;
}

li:last-child {
  border-right: 1px solid #DDD;
}

button {
  width: 100%;
  border: 1px solid #DDD;
  border-right: 0;
  border-top: 0;
  padding: 10px;
  background: #FFF;
  font-size: 14px;
  font-weight: bold;
  height: 60px;
  color: #999
}

li.active button {
  background: #F5F5F5;
  color: #000;
}

table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}

th {
  background: #F5F5F5;
  display: none;
  position: relative;
}

td,
th {
  height: 53px
}

td,
th {
  border: 1px solid #DDD;
  padding: 10px;
  empty-cells: show;
}

td,
th {
  text-align: left;
}

td+td,
th+th {
  text-align: center;
  display: none;
}

td.default {
  display: table-cell;
}

.bg-purple::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background-color: #A32362
}

.bg-blue::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background-color: #0097CF;
}

.sep {
  background: #F5F5F5;
  font-weight: bold;
}

.txt-l {
  font-size: 28px;
  font-weight: bold;
}

.txt-top {
  position: relative;
  top: -9px;
  left: -2px;
}

.tick {
  font-size: 18px;
  color: #2CA01C;
}

.hide {
  border: 0;
  background: none;
}

@media (min-width: 640px) {
  ul {
    display: none;
  }

  td,
  th {
    display: table-cell !important;
  }

  td,
  th {
    width: 330px;

  }

  td+td,
  th+th {
    width: auto;
  }
}


thead th {
  position: sticky;
  top: 0;
}

tbody tr:first-child td {
  position: sticky;
  top: 50px;
  background: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<article>

    <ul>
      <li class="bg-purple">
        <button>Self-Employed</button>
      </li>
      <li class="bg-blue">
        <button>Simple Start</button>
      </li>
      <li class="bg-blue active">
        <button>Essentials</button>
      </li>
      <li class="bg-blue">
        <button>Plus</button>
      </li>
    </ul>

    <table>
      <thead>
        <tr>
          <th class="hide"></th>
          <th class="bg-purple">Self-Employed</th>
          <th class="bg-blue">Simple Start</th>
          <th class="bg-blue default">Essentials</th>
          <th class="bg-blue">Plus</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Monthly price</td>
          <td><span class="txt-top">&pound;</span><span class="txt-l">6</span></td>
          <td><span class="txt-top">&pound;</span><span class="txt-l">7</span></td>
          <td class="default"><span class="txt-top">&pound;</span><span class="txt-l">15</span></td>
          <td><span class="txt-top">&pound;</span><span class="txt-l">25</span></td>
        </tr>
        <tr>
          <td colspan="5" class="sep">Get started easily</td>
        </tr>
        <tr>
          <td>Includes free updates and new features as they become available</td>
          <td><span class="tick">&#10004;</span></td>
          <td><span class="tick">&#10004;</span></td>
          <td class="default"><span class="tick">&#10004;</span></td>
          <td><span class="tick">&#10004;</span></td>
        </tr>
        <tr>
          <td>No software to install — sign up online in moments</td>
          <td><span class="tick">&#10004;</span></td>
          <td><span class="tick">&#10004;</span></td>
          <td class="default"><span class="tick">&#10004;</span></td>
          <td><span class="tick">&#10004;</span></td>
        </tr>
        <tr>
          <td>Import customer & supplier details from Excel, Outlook and .csv</td>
          <td></td>
          <td><span class="tick">&#10004;</span></td>
          <td class="default"><span class="tick">&#10004;</span></td>
          <td><span class="tick">&#10004;</span></td>
        </tr>
        <tr>
          <td>Accept card payments in QuickBooks Online</td>
          <td></td>
          <td><span class="tick">&#10004;</span></td>
          <td class="default"><span class="tick">&#10004;</span></td>
          <td><span class="tick">&#10004;</span></td>
        </tr>
        <tr>
          <td colspan="5" class="sep">Stay protected and get support</td>
        </tr>
        <tr>
          <td>Free telephone and online support</td>
          <td></td>
          <td><span class="tick">&#10004;</span></td>
          <td class="default"><span class="tick">&#10004;</span></td>
          <td><span class="tick">&#10004;</span></td>
        </tr>
        <tr>
          <td>Strong encryption protects your business data</td>
          <td><span class="tick">&#10004;</span></td>
          <td><span class="tick">&#10004;</span></td>
          <td class="default"><span class="tick">&#10004;</span></td>
          <td><span class="tick">&#10004;</span></td>
        </tr>
        <tr>
          <td>Automatic data backups</td>
          <td><span class="tick">&#10004;</span></td>
          <td><span class="tick">&#10004;</span></td>
          <td class="default"><span class="tick">&#10004;</span></td>
          <td><span class="tick">&#10004;</span></td>
        </tr>
      </tbody>
    </table>

  </article>