Элементы заголовка таблицы CSS и стандартные ячейки

Я хочу, чтобы все ячейки TD имели одинаковый размер (квадрат), но я не знаю, как сделать левые заголовки (пустой и один с отметками времени) меньше. Я знаю, что использовал табличный макет: исправлено, но у меня не было другой подсказки. Есть идеи ?Элементы заголовка таблицы CSS и стандартные ячейки

CSS:

body 
{ 
    font-family: arial; 
    background-image: url("back.jpg"); 
    background-repeat: no-repeat; 
} 
table{ 
    table-layout: fixed; 
} 
td 
{ 
    margin: 0; 
    text-align: center; 
    border-collapse: collapse; 
    outline: 3px solid #e3e3e3; 
    padding: 5px 10px; 
    font-size: 20px; 
    width: 30%; 
    background: rgba(250, 246, 246,.8); 
} 
td:after{ 
    content:''; 
    display:block; 
    margin-top:50%; 
} 
th 
{ 
    background: #666; 
    color: white; 
    padding: 5px 10px; 
    width: 20%; 
} 

td:hover 
{ 
    cursor: pointer; 
    background: rgba(228,255,255,0.5); 
    back 
     color: white; 
} 
table tr:first-of-type { 
    font-size:30px; 
    font-style: italic; 
}

HTML:

<!doctype html> 
<html> 
<head> 
    <title>Tabel</title> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
</head> 
<body> 
<table width="100%" align="center"> 
    <tr> 
     <th></th> 
     <th>Luni</th> 
     <th>Marti</th> 
     <th>Miercuri</th> 
     <th>Joi</th> 
     <th>Vineri</th> 
     <th>Sambata</th> 
     <th>Duminica</th> 
    </tr> 
    <tr> 
     <th>09:00</th> 

     <td>Cornel</td> 
     <td>Cornel</td> 
     <td></td> 
     <td>Cornel</td> 
     <td>Cornel</td> 
     <td>Cornel</td> 
     <td>Cornel</td> 
    </tr> 

    <tr> 
     <th>10:00</th> 

     <td>Cornel</td> 
     <td>Cornel</td> 
     <td>Cornel1</td> 
     <td>Cornel</td> 
     <td>Cornel</td> 
     <td>Cornel</td> 
     <td>Cornel</td> 
    </tr> 

    <tr> 
     <th>18:00</th> 

     <td>Cornel</td> 
     <td>Cornel</td> 
     <td>Cornel</td> 
     <td>Cornel</td> 
     <td>Cornel</td> 
     <td>Cornel</td> 
     <td>Cornel</td> 
    </tr> 

    <tr> 
     <th>19:00</th> 

     <td>Cornel</td> 
     <td>Cornel</td> 
     <td>Cornel</td> 
     <td>Cornel</td> 
     <td>Cornel</td> 
     <td>Cornel</td> 
     <td>Cornel</td> 
    </tr> 

    <tr> 
     <th>20:00</th> 

     <td>Cornel</td> 
     <td>Cornel</td> 
     <td>Cornel</td> 
     <td>Cornel</td> 
     <td>Cornel</td> 
     <td>Cornel</td> 
     <td>Cornel</td> 
    </tr> 
</table>

источник

2015-09-24 Ann

Вы получили это почти как это должно быть ...

Ive обновил свой HTML и ваш CSS. Смотри ниже.

body { 
 
    font-family: arial; 
 
    background-image: url("back.jpg"); 
 
    background-repeat: no-repeat; 
 
} 
 
table { 
 
    table-layout: fixed; 
 
} 
 
td { 
 
    margin: 0; 
 
    text-align: center; 
 
    border-collapse: collapse; 
 
    outline: 3px solid #e3e3e3; 
 
    padding: 5px 10px; 
 
    font-size: 20px; 
 
    width: 30%; 
 
    background: rgba(250, 246, 246, .8); 
 
} 
 
td:after { 
 
    content: ''; 
 
    display: block; 
 
    margin-top: 50%; 
 
} 
 
th:first-child { /* CHANGE THE SIZE OF THE FIRST TH AND THE TD BELOW IT WILL FOLLOW... */ 
 
    width: 14%; 
 
} 
 
th { 
 
    background: #666; 
 
    color: white; 
 
    padding: 5px 10px; 
 
    width: 20%; 
 
} 
 
td:hover { 
 
    cursor: pointer; 
 
    background: rgba(228, 255, 255, 0.5); 
 
    color: white; 
 
} 
 
table tr:first-of-type { 
 
    font-size: 30px; 
 
    font-style: italic; 
 
}

<table width="100%" align="center"> 
 
    <tr> 
 
     <th></th> 
 
     <th>Luni</th> 
 
     <th>Marti</th> 
 
     <th>Miercuri</th> 
 
     <th>Joi</th> 
 
     <th>Vineri</th> 
 
     <th>Sambata</th> 
 
     <th>Duminica</th> 
 
    </tr> 
 
    <tr> 
 
     <th>09:00</th> 
 

 
     <td>Cornel</td> 
 
     <td>Cornel</td> 
 
     <td></td> 
 
     <td>Cornel</td> 
 
     <td>Cornel</td> 
 
     <td>Cornel</td> 
 
     <td>Cornel</td> 
 
    </tr> 
 

 
    <tr> 
 
     <th>10:00</th> 
 

 
     <td>Cornel</td> 
 
     <td>Cornel</td> 
 
     <td>Cornel1</td> 
 
     <td>Cornel</td> 
 
     <td>Cornel</td> 
 
     <td>Cornel</td> 
 
     <td>Cornel</td> 
 
    </tr> 
 

 
    <tr> 
 
     <th>18:00</th> 
 

 
     <td>Cornel</td> 
 
     <td>Cornel</td> 
 
     <td>Cornel</td> 
 
     <td>Cornel</td> 
 
     <td>Cornel</td> 
 
     <td>Cornel</td> 
 
     <td>Cornel</td> 
 
    </tr> 
 

 
    <tr> 
 
     <th>19:00</th> 
 

 
     <td>Cornel</td> 
 
     <td>Cornel</td> 
 
     <td>Cornel</td> 
 
     <td>Cornel</td> 
 
     <td>Cornel</td> 
 
     <td>Cornel</td> 
 
     <td>Cornel</td> 
 
    </tr> 
 

 
    <tr> 
 
     <th>20:00</th> 
 

 
     <td>Cornel</td> 
 
     <td>Cornel</td> 
 
     <td>Cornel</td> 
 
     <td>Cornel</td> 
 
     <td>Cornel</td> 
 
     <td>Cornel</td> 
 
     <td>Cornel</td> 
 
    </tr> 
 
</table>

источник

2015-09-24 12:43:19 Aaron

Спасибо! Он работает – Ann

приветствуется @Ann – Aaron

-1

Моя идея заключается в том, чтобы поместить содержимое заголовка в другой таблице, чтобы сделать его работу:

<tr> 
    <th> 
    <table> 
     <tr> 
     <td>18:00</td> 
     </tr> 
    </table> 
    </th> 

    <td>Cornel</td> 
    <td>Cornel</td> 
    <td>Cornel</td> 
    <td>Cornel</td> 
    <td>Cornel</td> 
    <td>Cornel</td> 
    <td>Cornel</td> 
</tr>

Тогда вы можете просто изменить размер таблицы внутри заголовков.

источник

2015-09-24 12:48:33

Наличие 2 таблиц, представляющих 1 стол, не способ пойти. Это противоречит всем основным принципам. Таблицы имеют заголовки по какой-то причине. Вы должны использовать CSS для редактирования. –

Элементы заголовка таблицы CSS и стандартные ячейки

ответ

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