Yatay kaydırma tablo - mobil ekranlarında yatay kaydırma yapabilirsiniz böylece bir tablo sarmak için bir kap kullanmak istiyorum sağ kenarı

Question

üzerine dolgu kaybolan:

* { 
 
    box-sizing: border-box; 
 
} 
 
body { 
 
    padding: 10px; 
 
    margin: 0px; 
 
} 
 
.table-wrapper { 
 
\t width: calc(100% + 20px); 
 
\t overflow: auto; 
 
\t margin-left: -10px; 
 
\t margin-right: -10px; 
 
\t padding: 0 10px; 
 
} 
 
table caption { 
 
    text-align: left; 
 
    padding: 5px 5px; 
 
    background: black; 
 
    color: white; 
 
} 
 
table { /* for illustration purposes */ 
 
    width: 1000px; 
 
    border: 1px solid black; 
 
}

<div class="table-wrapper"> 
 
    <table> 
 
    <caption>title of the table</caption> 
 
    <thead> 
 
     <tr> 
 
     <td>Date</td> 
 
     <td>Away</td> 
 
     <td>Pts</td> 
 
     <td>Home</td> 
 
     <td>Pts</td> 
 
     <td>Match</td> 
 
     </tr> 
 
    </thead> 
 
    </table> 
 
</div>

açıkça belirtmek açısından tablo yatay olarak kaydırılır, .table-wrapper'un kenarlarında negatif kenar boşlukları kullandım, böylece tablo ekranın sağ kenarına doğru patlar (kod parçacığını hareket halinde görmek için çalıştırın). Daha sonra, .table-wrapper'un kenarlarını doldurdum, böylece tablonun sol veya sağ kenarına kadar kayarken tekrar rahat bir alan var.

Ancak, bu dolgu, sol kenarda istenildiği gibi ortaya çıkarsa da, sağ kenarda görünmez (çünkü .table-wrapper, ekran genişliğinin yalnızca% 100'udur). Bu, tarayıcılarda geçerli gibi görünüyor.

CSS düzeltmesi var mı? Böylece, sağa doğru kaydırdığınızda tablonun sağ kenarına sadece bir dolgu görünecek mi?

Answer 1

bu deneyin:

body { 
 
    margin: 0; 
 
} 
 
.table-wrapper { 
 
    overflow: auto; 
 
    padding: 0 10px; 
 
} 
 
table { 
 
    display: inline-table; /*key*/ 
 
    width: 1000px; 
 
    border: 1px solid black; 
 
} 
 
table caption { 
 
    text-align: left; 
 
    padding: 5px 5px; 
 
    background: black; 
 
    color: white; 
 
}

<div class="table-wrapper"> 
 
    <table> 
 
    <caption>title of the table</caption> 
 
    <thead> 
 
     <tr> 
 
     <td>Date</td> 
 
     <td>Away</td> 
 
     <td>Pts</td> 
 
     <td>Home</td> 
 
     <td>Pts</td> 
 
     <td>Match</td> 
 
     </tr> 
 
    </thead> 
 
    </table> 
 
</div>