如何在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/