Форум

javascript_pupil · #1 (**permalink**) 18.11.2015, 13:29

Помогите, пожалуйста, найти ошибку. В имеющемся коде заголовок первой (пустой) таблицы в IE 11 отображается криво. Как сделать, чтобы даже в пустой таблице заголовок выглядел также, как и во второй? Код страницы прилагается.

<!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Test caption</title>
<style>
caption {
display: table-caption;
padding: 5px;
color: #1c3396;
background: #e7e7e7;
border: 1px solid #c9c9c9;
font-weight: bold;
</style>

</head><body>
<h1>Two tables with caption</h1>

<table><caption>Empty table</caption></table>

<br><br><br>

<table><caption>Table with content</caption>
<tr>
<td>One</td><td>2</td><td>100.0%</td>
</tr>
</table>

</body></html>

Mess4me · #2 (**permalink**) 18.11.2015, 14:55

<!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Test caption</title>
<style>
caption {
display: block;
padding: 5px;
color: #1c3396;
background: #e7e7e7;
border: 1px solid #c9c9c9;
font-weight: bold;
}
</style>

</head><body>
<h1>Two tables with caption</h1>

<table><caption>Empty table</caption></table>

<br><br><br>

<table><caption>Table with content</caption>
<tr>
<td>One</td><td>2</td><td>100.0%</td>
</tr>
</table>

</body></html>

javascript_pupil · #3 (**permalink**) 18.11.2015, 18:06

Да, чего-то я не сообразил про блоки. Спасибо! Я вышел из положения сделав у table min-width в пикселях, но Ваше решение лучше, т.к. универсальнее.

Форум

Справочник

Discord чат

Курсы javascript