未设定TH和TD高度

Question

在我正在创建的表格中，我无法让th和td达到我赋予的高度。 如您在我的代码中所看到的，看起来这两个字段和th正在填充整个表格高度。

无论如何，有没有将td和th设置为我给的80px和60px ？

 #staff-table { width: 100%; height: 600px; border: 1px solid #CDCDCD; } th, td { color: 303030; padding: 10px; } th { font-family: 'Source Sans Pro', sans-serif; font-size: 1.2em; font-weight: 600; height: 80px; background: #F7F7F7; } th:hover { background: #F7F7F7; } tr { border-bottom: 1px solid #EBEBEB; transition:.5s; -webkit-transition:.5s; } tr:hover { background: #09afdf;/*rgba(9, 175, 223, .4);*/ transition:.5s; -webkit-transition:.5s; } td { font-size: 1em; font-family: 'Lato', sans-serif; height: 60px; } 

 <table id="staff-table"> <tr> <th>First Name</th> <th>Last Name</th> <th>Print Name</th> <th>Type</th> <th>Balance</th> </tr> <tr> <td>Georg</td> <td>Reese</td> <td>George Reese</td> <td>Primary</td> <td>32</td> </tr> <tr> <td>Bob</td> <td>Synder</td> <td>Bob Snyder</td> <td>Sales</td> <td>10</td> </tr> </table> 

Answer 1

是的，通过删除height: 600px #staff-table规则上的height: 600px

 #staff-table { width: 100%; min-height: 100px; /* added based on comment, to keep a minimum height */ border: 1px solid #CDCDCD; } th, td { color: #303030; padding: 10px; } th { font-family: 'Source Sans Pro', sans-serif; font-size: 1.2em; font-weight: 600; height: 80px; background: #F7F7F7; } th:hover { background: #F7F7F7; } tr { border-bottom: 1px solid #EBEBEB; transition:.5s; -webkit-transition:.5s; } tr:hover { background: #09afdf;/*rgba(9, 175, 223, .4);*/ transition:.5s; -webkit-transition:.5s; } td { font-size: 1em; font-family: 'Lato', sans-serif; height: 60px; } 

 <table id="staff-table"> <tr> <th>First Name</th> <th>Last Name</th> <th>Print Name</th> <th>Type</th> <th>Balance</th> </tr> <tr> <td>Georg</td> <td>Reese</td> <td>George Reese</td> <td>Primary</td> <td>32</td> </tr> <tr> <td>Bob</td> <td>Synder</td> <td>Bob Snyder</td> <td>Sales</td> <td>10</td> </tr> </table> 

Answer 2

如果您打算让最上面的一行为600px那么您需要将其他行设置为自己的特定ID或类。 #staff-table会首先应用到所有这些对象，因此它具有该height 。

 #staff-table { width: 100%; border: 1px solid #CDCDCD; } th, td { color: 303030; padding: 10px; } th { font-family: 'Source Sans Pro', sans-serif; font-size: 1.2em; font-weight: 600; height: 80px; background: #F7F7F7; } th:hover { background: #F7F7F7; } tr { border-bottom: 1px solid #EBEBEB; transition:.5s; -webkit-transition:.5s; } tr:hover { background: #09afdf;/*rgba(9, 175, 223, .4);*/ transition:.5s; -webkit-transition:.5s; } td { font-size: 1em; font-family: 'Lato', sans-serif; height: 60px; } 

 <table id="staff-table"> <tr> <th>First Name</th> <th>Last Name</th> <th>Print Name</th> <th>Type</th> <th>Balance</th> </tr> <tr> <td>Georg</td> <td>Reese</td> <td>George Reese</td> <td>Primary</td> <td>32</td> </tr> <tr> <td>Bob</td> <td>Synder</td> <td>Bob Snyder</td> <td>Sales</td> <td>10</td> </tr> </table>