如何在HTML中设置正确的表格宽度？

Question

在下面的html代码中，我创建了一个表格。但列宽不正确。我也添加了CSS代码和输出图像。请告诉我我错在哪里，为什么表列宽度不相等。提前致谢。

body { 
 
    width: 800px; 
 
    margin: auto; 
 
    margin-top: 100px; 
 
} 
 

 
header { 
 
    background-color: #EC7063; 
 
    border-radius: 10px; 
 
    text-align: center; 
 
} 
 

 
main { 
 
    background-color: #76D7C4; 
 
    border-radius: 10px; 
 
    padding: 20px; 
 
} 
 

 
h1 { 
 
    color: #21618C; 
 
} 
 

 
#cat { 
 
    border-radius: 10px; 
 
    background-color: #27AE60; 
 
    padding: 10px; 
 
    margin-right: 20px; 
 
    float: left; 
 
    height: 200px; 
 
} 
 

 
h2 { 
 
    color: #21618C; 
 
} 
 

 
#prod { 
 
    border-radius: 10px; 
 
    background-color: #AF7AC5; 
 
    height: 200px; 
 
    padding: 10px; 
 
    overflow: hidden; 
 
} 
 

 
table { 
 
    display: block; 
 
    overflow: auto; 
 
    height: 100px; 
 
    table-layout: fixed; 
 
    width: 100%; 
 
} 
 

 
table, 
 
th, 
 
td { 
 
    border: 1px solid black; 
 
    border-collapse: collapse; 
 
} 
 

 
td { 
 
    text-align: center; 
 
} 
 

 
footer { 
 
    background-color: #EC7063; 
 
    border-radius: 10px; 
 
    text-align: center; 
 
    font-size: 25px; 
 
    color: #F8F9F9; 
 
    clear: both; 
 
}

<header> 
 
    <h1>My Guitar Shop</h1> 
 
</header> 
 
<header> 
 
    <h1>Product Manager</h1> 
 
</header> 
 
<main> 
 
    <h1>Product List</h1> 
 
    <section id="cat"> 
 
    <!-- display a list of categories --> 
 
    <h2>Categories</h2> 
 
    <nav> 
 
     <ul> 
 
     <li><a href="?category_id=1">Guitars</a> 
 
     </li> 
 
     <li><a href="?category_id=2">Basses</a> 
 
     </li> 
 
     <li><a href="?category_id=3">Drums</a> 
 
     </li> 
 
     <li><a href="?category_id=4">Flutes</a> 
 
     </li> 
 
     <li><a href="?category_id=5">Trumpets</a> 
 
     </li> 
 
     </ul> 
 
    </nav> 
 
    </section> 
 
    <section id="prod"> 
 
    <!-- display a table of products --> 
 
    <h2>Guitars</h2> 
 
    <table> 
 
     <tr> 
 
     <th>Code</th> 
 
     <th>Name</th> 
 
     <th>Price</th> 
 
     <th>Delete</th> 
 
     </tr> 
 
     <tr> 
 
     <td>gu</td> 
 
     <td>ytr</td> 
 
     <td>0000000546</td> 
 
     <td> 
 
      <form action="#" method="post"> 
 
      <input type="hidden" name="action" value="delete_product" /> 
 
      <input type="hidden" name="id" value="19" /> 
 
      <input type="hidden" name="category_id" value="1" /> 
 
      <input type="submit" value="Delete" /> 
 
      </form> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td>yui</td> 
 
     <td>uyt</td> 
 
     <td>0000000888</td> 
 
     <td> 
 
      <form action="#" method="post"> 
 
      <input type="hidden" name="action" value="delete_product" /> 
 
      <input type="hidden" name="id" value="23" /> 
 
      <input type="hidden" name="category_id" value="1" /> 
 
      <input type="submit" value="Delete" /> 
 
      </form> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td>oi</td> 
 
     <td>iu</td> 
 
     <td>0000000098</td> 
 
     <td> 
 
      <form action="#" method="post"> 
 
      <input type="hidden" name="action" value="delete_product" /> 
 
      <input type="hidden" name="id" value="24" /> 
 
      <input type="hidden" name="category_id" value="1" /> 
 
      <input type="submit" value="Delete" /> 
 
      </form> 
 
     </td> 
 
     </tr> 
 
    </table> 
 
    <p><a href="?action=show_add_form">Add Product</a></p> 
 
    </section> 
 
</main> 
 
<footer> 
 
    <p>&copy; 2017 My Guitar Shop, Inc.</p> 
 
</footer>

Answer 1

您可以将表格封装在div中，并将max-height和overflow: scroll指定为该div。这很容易 Codepen链接 https://codepen.io/yashagw/pen/wezzVj

Answer 2

不要为表使用display: block;。只需使用默认表格显示（表格单元格）即可。

Answer 3

删除display: block;

请尝试以下

table { 
overflow: auto; 
height: 100px; 
table-layout: fixed; 
width: 100%; 

} 

Answer 4

您可以从CSS

th, td { 
    width: 33.33333333%; 
} 

Answer 5

使用此代码表，TD设置宽度和日

table { 
overflow: auto; 
table-layout: fixed; 
width: 100%; 
border-collapse: collapse; 
} 
table tr td, table tr th{ 
width:1%; 
border: 1px solid black; 
text-align: center; 
} 

你不能使用桌子的高度和显示块。

Answer 6

如果您正在寻找的是一张填充100％宽度的表格，并且当内容超出高度时还显示滚动条，则可以执行以下操作。

首先，删除"display: block;"财产从表的CSS。它可以消除表格及其子标签（tr，td，th等）的许多固有属性。

现在，将表格封装在固定高度的div中，并在CSS中给出div固定高度和overflow-y属性，如下所示。

HTML

<div class="table-container"> 
    <table> 
     ...table contents... 
    </table> 
</div> 

CSS

.table-container { 
    height: 100px; 
    overflow-y: auto; 
} 

/* Table has the following css now. */ 

table { 
table-layout: fixed; 
width: 100%; 
} 

见JS提琴。 https://jsfiddle.net/rhk217/L4khbs2j/