我正在尝试调整：
https://codepen.io/adrianjacob/full/KdVLXY 使表格标题和第一行在移动设备和桌面设备的滚动上“粘滞”。
我已经在 CSS 中完成了这个：
thead th {
position: sticky;
top: 0;
}
和
tbody tr:first-child td {
position: sticky;
top: 50px;
background:white;
}
为了在我需要的地方获得“粘性”，但我的“头”没有出现在移动设备上，首先显示“tr”并且它在移动设备和桌面上是粘性的。
我还需要“头部”上方的那些彩色线条来显示并保持粘性。 感谢您提供的任何帮助。
【问题讨论】：
标签： html css css-tables
我将彩色线条作为伪元素，并添加到 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">£</span><span class="txt-l">6</span></td>
<td><span class="txt-top">£</span><span class="txt-l">7</span></td>
<td class="default"><span class="txt-top">£</span><span class="txt-l">15</span></td>
<td><span class="txt-top">£</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">✔</span></td>
<td><span class="tick">✔</span></td>
<td class="default"><span class="tick">✔</span></td>
<td><span class="tick">✔</span></td>
</tr>
<tr>
<td>No software to install — sign up online in moments</td>
<td><span class="tick">✔</span></td>
<td><span class="tick">✔</span></td>
<td class="default"><span class="tick">✔</span></td>
<td><span class="tick">✔</span></td>
</tr>
<tr>
<td>Import customer & supplier details from Excel, Outlook and .csv</td>
<td></td>
<td><span class="tick">✔</span></td>
<td class="default"><span class="tick">✔</span></td>
<td><span class="tick">✔</span></td>
</tr>
<tr>
<td>Accept card payments in QuickBooks Online</td>
<td></td>
<td><span class="tick">✔</span></td>
<td class="default"><span class="tick">✔</span></td>
<td><span class="tick">✔</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">✔</span></td>
<td class="default"><span class="tick">✔</span></td>
<td><span class="tick">✔</span></td>
</tr>
<tr>
<td>Strong encryption protects your business data</td>
<td><span class="tick">✔</span></td>
<td><span class="tick">✔</span></td>
<td class="default"><span class="tick">✔</span></td>
<td><span class="tick">✔</span></td>
</tr>
<tr>
<td>Automatic data backups</td>
<td><span class="tick">✔</span></td>
<td><span class="tick">✔</span></td>
<td class="default"><span class="tick">✔</span></td>
<td><span class="tick">✔</span></td>
</tr>
</tbody>
</table>
</article>【讨论】：