Padding der Tabelle innerhalb eines div

Question

ich so etwas wie die folgenden haben:

.vili_horizontal_scroll_auto{ 
 
    width: auto; 
 
    border: solid 1px #bed5cd; 
 
    overflow-x: scroll; 
 
    overflow-y: hidden; 
 
    white-space: nowrap; 
 
} 
 

 
.vili_table_padding{ 
 
    padding-left: 20px; 
 
    padding-right: 20px; 
 
} 
 

 
table.vili_wide_table { 
 
    width: 1000px; 
 
} 
 

 
table { 
 
    background-color: coral; 
 
}

<div class="vili_horizontal_scroll_auto vili_table_padding"> 
 
    <table class="vili_wide_table"> 
 
    <tr><td>this should have whitespace on left and right</td></tr> 
 
    </table> 
 
</div> 
 

 
<div class="vili_horizontal_scroll_auto vili_table_padding"> 
 
    <table> 
 
    <tr><td>this should have whitespace on left and right</td></tr> 
 
    <tr><td>something very loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong</td></tr> 
 
    </table> 
 
</div>

Das Problem ist, dass die Tabelle korrekt in den weißen Raum auf der linken Hände Seite bewegt, ist es jedoch berührt den Bildschirm auf der rechten Seite auch nach dem Scrollen nach ganz rechts.

Wie behebe ich es, damit die Tabelle vom Bildschirm getrennt wird.

HINWEIS: Der Tisch ist sehr breit und fast immer breiter als der Bildschirm.

Danke

Answer 1

Ihre Breite ändern

es das Ansichtsfenster ist überfüllt. '100%' unten funktioniert, aber ich bin nicht sicher, ob es Ihren Bedürfnissen gerecht zu werden, aber das Problem ist im Grunde das width:1000px;

.vili_horizontal_scroll_auto{ 
 
    width: auto; 
 
    border: solid 1px #bed5cd; 
 
    overflow-x: scroll; 
 
    overflow-y: hidden; 
 
    white-space: nowrap; 
 
} 
 

 
.vili_table_padding{ 
 
    padding-left: 20px; 
 
    padding-right: 20px; 
 
} 
 

 
table { 
 
    width: 100%; 
 
    background-color: coral 
 
}

<div class="vili_horizontal_scroll_auto vili_table_padding"> 
 
    <table> 
 
    <tr><td>this should have whitespace on left and right</td></tr> 
 
    </table> 
 
</div>