TH和TD高度未设定

Question

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

有没有让td和th设置为80px和60px我给它？

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

是的，删除了height: 600px规则

上的#staff-table

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