position-sticky-table-parts-ref.html (856B)
1 <!DOCTYPE html> 2 <title>Nested position:sticky table elements should render correctly</title> 3 <style> 4 .scroller { 5 width: 100px; 6 height: 250px; 7 overflow-x: hidden; 8 overflow-y: auto; 9 } 10 11 .contents { 12 height: 700px; 13 } 14 15 table { 16 border-collapse: collapse; 17 } 18 19 #child, td, th { 20 height: 50px; 21 width: 50px; 22 padding: 0; 23 background: green; 24 } 25 26 .prepadding { 27 height: 155px; 28 } 29 30 </style> 31 32 <script> 33 window.addEventListener('load', function() { 34 document.getElementById('scroller1').scrollTop = 150; 35 }); 36 </script> 37 38 <div>There should be a green square at the top of the scroll view and no red or blue visible.</div> 39 40 <div id="scroller1" class="scroller"> 41 <div class="contents"> 42 <div class="prepadding"></div> 43 <table> 44 <tbody> 45 <tr><td><div id="child"></div></td></tr> 46 </tbody> 47 </table> 48 </div> 49 </div>