Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Криво отображается caption в пустой таблице (https://javascript.ru/forum/xhtml-html-css/59599-krivo-otobrazhaetsya-caption-v-pustojj-tablice.html)

javascript_pupil 18.11.2015 13:29

Криво отображается caption в пустой таблице
 
Помогите, пожалуйста, найти ошибку. В имеющемся коде заголовок первой (пустой) таблицы в 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 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 18.11.2015 18:06

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


Часовой пояс GMT +3, время: 04:54.