TH и TD высота не установлена

В таблице, которую я создаю, я не могу получить th и td, чтобы взять высоту, которую я ей даю. Как вы можете видеть в моем коде, похоже, что два поля и th заполняют всю высоту стола.TH и TD высота не установлена

Есть в любом случае, чтобы получить 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>

источник

2017-02-01 Paul

Да, удалив 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>

источник

2017-02-01 19:42:46 LGSon

Есть в любом случае, чтобы определить высоту до самой таблицы, так что если данные не в ней таблица все еще показывает? – Paul

@Paul Да ... обновленный ответ с 'min-height' на столе – LGSon

Спасибо за помощь! – Paul

Если вы хотели иметь, что верхний ряд будет 600px, то вам нужно к другим собственный собственный идентификатор или класс. Сначала #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>

источник

2017-02-01 19:45:47

TH и TD высота не установлена ​​

ответ

Смежные вопросы

TH и TD высота не установлена