Make HTML table fit width of DIV - html

Question

I'm trying to make a sidebar for my website that will contain a list of names, and I want to use HTML rows so I can set different background colors for even/odd rows. The issue I'm running into is making the HTML table fit the entire width of the sidebar div, without having any horizontal overflow. Ideally this will be responsive too. What am I doing wrong?
Codepin: https://codepen.io/dansbyt/pen/gOrozzV?editors=1100
CSS in question:
#sidebar {
z-index: 1;
position: fixed;
left: 0%;
top: 8%;
width: 20%;
height:100vh;
overflow-y: scroll;
background-color: #EBEDE9;
border-right: 2px solid darkgray}
tr {
display: block;
table-layout: fixed;
width: 100%;
padding: 10%;
text-align: center;
color: blue;
border-bottom: 1px solid darkgray}
tr:nth-child(even){background-color: #f2f2f2;}
tr:hover {background-color: #E2D0BE;}

Answer 1

You had to set width of table & tr as 100%
#sidebar {
z-index: 1;
position: fixed;
left: 0%;
top: 8%;
width: 20%;
height:100vh;
overflow-y: scroll;
background-color: #EBEDE9;
border-right: 2px solid darkgray}
table,tr{
width:100%
}
td {
width: 100%;
padding: 10%;
text-align: center;
color: blue;
border-bottom: 1px solid darkgray}
tr:nth-child(even){background-color: #f2f2f2;}
tr:hover {background-color: #E2D0BE;}
#content {
position: fixed;
left: 20%;
top: 8%;
width: 72%;
height:100vh;
padding: 4%;
overflow-y: scroll;
background-color: #F5F7F2;}
<div id="sidebar">
<table>
<tr><td>John Doe</td></tr>
<tr><td>Justin Bieber</td></tr>
<tr><td>Donald Trump</td></tr>
<tr><td>Shawn Mendes</td></tr>
<tr><td>Donald Duck</td></tr>
<tr><td>Micky Mouse</td></tr>
<tr><td>7</td></tr>
<tr><td>8</td></tr>
<tr><td>9</td></tr>
<tr><td>10</td></tr>
<tr><td>11</td></tr>
<tr><td>12</td></tr>
<tr><td>13</td></tr>
<tr><td>14</td></tr>
<tr><td>15</td></tr>
<tr><td>16</td></tr>
<tr><td>17</td></tr>
<tr><td>18</td></tr>
<tr><td>19</td></tr>
<tr><td>20</td></tr>
<tr><td>21</td></tr>
<tr><td>22</td></tr>
<tr><td>23</td></tr>
<tr><td>24</td></tr>
<tr><td>25</td></tr>
<tr><td>26</td></tr>
<tr><td>27</td></tr>
<tr><td>28</td></tr>
<tr><td>29</td></tr>
<tr><td>30</td></tr>
<tr><td>31</td></tr>
<tr><td>32</td></tr>
<tr><td>33</td></tr>
<tr><td>34</td></tr>
<tr><td>35</td></tr>
<tr><td>36</td></tr>
<tr><td>37</td></tr>
<tr><td>38</td></tr>
<tr><td>39</td></tr>
<tr><td>40</td></tr>
<tr><td>41</td></tr>
<tr><td>42</td></tr>
<br><br><br><br>
</table>
</div>
<div id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed viverra ipsum nunc aliquet bibendum. Mauris pharetra et ultrices neque ornare aenean. Luctus venenatis lectus magna fringilla urna porttitor rhoncus. Odio ut sem nulla pharetra. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Est ullamcorper eget nulla facilisi etiam dignissim. Elit ut aliquam purus sit. Sed vulputate odio ut enim blandit volutpat. Leo integer malesuada nunc vel. Urna porttitor rhoncus dolor purus non enim praesent. Ipsum nunc aliquet bibendum enim facilisis gravida neque. Morbi leo urna molestie at elementum. Et magnis dis parturient montes nascetur ridiculus mus. Nec ultrices dui sapien eget mi. Massa massa ultricies mi quis hendrerit dolor magna. Cursus vitae congue mauris rhoncus aenean vel elit. Et malesuada fames ac turpis egestas maecenas. At volutpat diam ut venenatis tellus. Feugiat scelerisque varius morbi enim nunc faucibus. Et netus et malesuada fames ac. Morbi quis commodo odio aenean. Sed vulputate mi sit amet. Sed lectus vestibulum mattis ullamcorper velit sed. Ornare suspendisse sed nisi lacus sed viverra. Fermentum iaculis eu non diam phasellus vestibulum. Laoreet non curabitur gravida arcu ac tortor dignissim convallis aenean. Facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum dui. Tortor at risus viverra adipiscing at in tellus integer feugiat. Faucibus purus in massa tempor nec feugiat nisl. Molestie a iaculis at erat pellentesque adipiscing commodo. In nibh mauris cursus mattis molestie a iaculis at erat. Faucibus ornare suspendisse sed nisi lacus sed viverra tellus. Aliquet sagittis id consectetur purus ut faucibus pulvinar elementum. Egestas fringilla phasellus faucibus scelerisque eleifend. Tortor consequat id porta nibh venenatis cras sed felis. Eu volutpat odio facilisis mauris sit. Ac placerat vestibulum lectus mauris ultrices. Eu feugiat pretium nibh ipsum consequat nisl vel. Id cursus metus aliquam eleifend. Amet purus gravida quis blandit. Lacus vel facilisis volutpat est velit egestas dui id ornare. Sapien faucibus et molestie ac feugiat sed lectus vestibulum mattis. Maecenas accumsan lacus vel facilisis volutpat est. Phasellus vestibulum lorem sed risus ultricies tristique. Tincidunt vitae semper quis lectus nulla at volutpat. Praesent tristique magna sit amet. Amet est placerat in egestas erat imperdiet sed euismod. Eget mi proin sed libero enim sed faucibus turpis in. Ac odio tempor orci dapibus ultrices in. Diam maecenas sed enim ut sem. Velit egestas dui id ornare arcu odio ut. Morbi tristique senectus et netus. Morbi tristique senectus et netus et malesuada fames ac. Nullam non nisi est sit amet facilisis. Egestas erat imperdiet sed euismod nisi porta. Egestas pretium aenean pharetra magna ac placerat. Augue neque gravida in fermentum et. Tortor pretium viverra suspendisse potenti nullam ac tortor vitae. Quisque sagittis purus sit amet volutpat consequat mauris nunc congue. Pharetra pharetra massa massa ultricies mi quis hendrerit dolor magna. Nisi vitae suscipit tellus mauris a diam maecenas sed enim. Lacus laoreet non curabitur gravida arcu ac tortor dignissim. Tristique nulla aliquet enim tortor at auctor. Nibh ipsum consequat nisl vel pretium lectus quam id leo. Egestas erat imperdiet sed euismod nisi porta lorem mollis aliquam. Dui ut ornare lectus sit. Dui ut ornare lectus sit amet est. Urna duis convallis convallis tellus. Nunc consequat interdum varius sit amet. Lacus laoreet non curabitur gravida.
</div>

Answer 2

The table is inheriting the sidebar width, so you need to specify the width of table element as 100%.
#sidebar {
table {
width:100%;
}
}

Answer 3

#sidebar {
z-index: 1;
position: fixed;
left: 0%;
top: 8%;
width: 20%;
height:100vh;
overflow-y: scroll;
background-color: #EBEDE9;
border-right: 2px solid darkgray}
#sidebar * {
box-sizing: border-box;
}
#sidebar > table {
width: 100%;
}
#sidebar > table tr td {
text-align: center;
display: inline-block;
}
tr {
display: block;
width: 100%;
padding: 15px;
color: blue;
text-align: center;
border-bottom: 1px solid darkgray}
tr:nth-child(even){background-color: #f2f2f2;}
tr:hover {background-color: #E2D0BE;}
#content {
position: fixed;
left: 20%;
top: 8%;
width: 72%;
height:100vh;
padding: 4%;
overflow-y: scroll;
background-color: #F5F7F2;}
You didn't set the border-box.
you added padding 10%. it's already overflow without box-sizing.
please see #sidebar * selector.

Answer 4

You have not set the table element to 100% width
table {
width:100%;
}
Full code:
#sidebar {
z-index: 1;
position: fixed;
left: 0%;
top: 8%;
width: 20%;
height:100vh;
overflow-y: scroll;
background-color: #EBEDE9;
border-right: 2px solid darkgray}
table {
width:100%;
}
tr {
display: block;
table-layout: fixed;
width: 100%;
padding: 10%;
text-align: center;
color: blue;
border-bottom: 1px solid darkgray}
tr:nth-child(even){background-color: #f2f2f2;}
tr:hover {background-color: #E2D0BE;}
#content {
position: fixed;
left: 20%;
top: 8%;
width: 72%;
height:100vh;
padding: 4%;
overflow-y: scroll;
background-color: #F5F7F2;}