html - 使 HTML 表格适合 DIV 的宽度

Question

我正在尝试为我的网站制作一个包含名称列表的侧边栏，并且我想使用 HTML 行，以便可以为偶数/奇数行设置不同的背景颜色。我遇到的问题是使 HTML 表格适合侧边栏 div 的整个宽度，而没有任何水平溢出。理想情况下，这也将是响应式的。我究竟做错了什么？

密码： https ://codepen.io/dansbyt/pen/gOrozzV ?editors=1100

有问题的CSS：

#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;}

标签： htmlcss

Answer 1

您必须将table&的宽度设置tr为 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>