Table container element padding when scrolled horizontally - html

Question

I have the following html/css code:
body {
background: #ccc;
}
.container {
width: 300px;
margin: 0 auto;
background: white;
overflow: auto;
padding: 20px;
}
table {
border: 1px solid red;
margin: 5px 0;
white-space: nowrap;
}
td {
padding: 5px;
border: 1px solid green;
}
<div class="container">
<table>
<tr>
<td class="nowrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</td>
</tr>
</table>
<table>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
</table>
</div>
I have been struggling to create a table container that has a padding. I've been able to come up with a solution, and this is the simplified version of it.
Can somebody explain to me why the container padding is not applied on the right side when scrolled to the right, and perhaps suggest a fix?
Update
This question seems to be a duplicate of a question I found later:
Horizontal scrolling table - disappearing padding on right edge
The correct answer is to make the table's display to be inline-table.

Answer 1

So I would recommend that you use display: inline-block; if you want to respect padding and maintain your border.
I've been looking into it for a little while and I can't seem to find any information regarding issues with tables respecting the padding of the parent.
body {
background: #ccc;
}
.container {
width: 300px;
margin: 0 auto;
background: white;
overflow: auto;
padding: 20px;
}
table {
border: 1px solid red;
margin: 5px 0;
white-space: nowrap;
display: inline-block;
}
td {
padding: 5px;
border: 1px solid green;
}
<div class="container">
<table>
<tr>
<td class="nowrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</td>
</tr>
</table>
<table>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
</table>
</div>

Answer 2

I found the correct answer to my question. The answer Chase Ingebritson gave only partially solves my problem. In my case I needed the table to remain a table, and his answer makes the table display as an inline block, in which case if you add table-layout: auto; it won't display as intended.
So a better answer is to make the table display: inline-table; (for which I never have found a practical use, except for this), and the table will remain and function as a table. And most importantly the container padding will be applied in every case.
Here is an example showcasing the answer:
body {
background: #ccc;
}
.container {
margin: 0 auto;
background: white;
overflow: auto;
padding: 20px;
}
.big {
width: 1000px;
}
.small {
width: 300px;
}
table {
border: 1px solid red;
margin: 5px 0;
white-space: nowrap;
table-layout: auto;
width: 100%;
display: inline-table; // the magic answer
}
td {
padding: 5px;
border: 1px solid green;
}
<div class="container big">
<table>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
</table>
</div>
<div class="container small">
<table>
<tr>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
</table>
</div>