Отображение таблицы с текстом <p>
Я пытаюсь отобразить таблицу внутри элемента p. Результат должен выглядеть примерно так:
*-----------------*
Text before. | Cell 1 | Cell 2 | Text after.
*-----------------*
Как показано, таблица должна быть центрирована по вертикали с текстом. Таблица может иметь несколько строк.
Следующие работы работают (в этом примере я использую встроенный CSS, чтобы упростить публикацию):
<html lang = "en">
<head>
</head>
<body>
<p>
Text before.
<table style = "display: inline-block; vertical-align: middle;">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>
Text after.
</p>
</body>
</html>
ОДНАКО, если я добавлю <!DOCTYPE html> в начало файла, таблица появится под надписью «Текст раньше».
Должна быть разница между режимом совместимости (когда тип документа не указан) и тем, когда тип документа указан, но я не знаю, как ее решить.
Спасибо!
Проще говоря, в стандартном режиме браузер закрывает элемент p, когда встречает table в коде. Ширина p составляет 100%, поэтому table переносится на следующую строку.
Настоящий вопрос: «Почему table»? Контейнер inline-flex или inline-gridspan подойдет лучше.
Действительно ли данные в таблице табличные? Если это так, вы можете сохранить ее в виде таблицы и вместо этого пожертвовать элементом p.
Paulie_D предоставил надежное решение. Кстати, и это не упоминалось в моем исходном сообщении, я не могу контролировать требование, чтобы таблица/сетка находилась внутри элемента p. Окружающий HTML-код взят из базы данных, в которой уже создан файл p. HTML-страница имеет программный код, поэтому пользователи могут вставлять таблицы в разных местах. Решение Paulie_D в основном решает эту проблему (за исключением того, что я не могу изменить CSS p, я не могу выровнять сетку p и по вертикали). Посмотрим, смогу ли я убедить власть имущих разрешить мне сменить p класс.
Ответы 2
Честно говоря, table здесь не указан. Идеально подойдет контейнер inline-grid.
Строки здесь не обязательны, но я включил их для ясности, но для оптимизации требуется subgrid.
p {
outline: 1px solid grey;
display: flex;
align-items: center;
}
.grid {
display: inline-grid;
grid-template-columns: repeat(2, 1fr);
gap: .25em;
outline: 1px solid red;
background: lightblue;
}
span .row {
display: grid;
grid-column: span 2;
grid-template-columns: subgrid;
}<p>
Text before.
<span class = "grid">
<span class = "row">
<span class = "cell">Cell 1</span>
<span class = "cell">Cell 2</span>
</span>
<span class = "row">
<span class = "cell">Cell 1</span>
<span class = "cell">Cell 2</span>
</span>
<span class = "row">
<span class = "cell">Cell 1</span>
<span class = "cell">Cell 2</span>
</span>
<span class = "row">
<span class = "cell">Cell 1</span>
<span class = "cell">Cell 2</span>
</span>
<span class = "row">
<span class = "cell">Cell 1</span>
<span class = "cell">Cell 2</span>
</span>
</span>
Text after.
</p>НО, как я уже сказал, строки на самом деле не требуются...
p {
outline: 1px solid grey;
display: flex;
align-items: center;
}
.grid {
display: inline-grid;
grid-template-columns: repeat(2, 1fr);
gap: .25em;
outline: 1px solid red;
background: lightblue;
}<p>
Text before.
<span class = "grid">
<span class = "cell">Cell 1</span>
<span class = "cell">Cell 2</span>
<span class = "cell">Cell 1</span>
<span class = "cell">Cell 2</span>
<span class = "cell">Cell 1</span>
<span class = "cell">Cell 2</span>
<span class = "cell">Cell 1</span>
<span class = "cell">Cell 2</span>
<span class = "cell">Cell 1</span>
<span class = "cell">Cell 2</span>
</span>
Text after.
</p>Вы можете добиться того же, но вам понадобится немного больше CSS. И я думаю, нам нужно заменить <p> тегом <div>.
.inline-container {
display: inline-block;
/* Keeps the container inline */
vertical-align: middle;
/* Aligns vertically to the middle */
}
table {
display: inline-table;
/* Makes the table display inline */
vertical-align: middle;
/* Aligns the table in the middle of the line */
margin: 0 5px;
/* Optional: Adds spacing around the table */
}<!DOCTYPE html>
<html lang = "en">
<head>
</head>
<body>
<div class = "inline-container">
Text before
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>
Text after
</div>
</body>
</html>
Блок-элемент внутри
pнедействителен. Также используйтеflexдля этого вопроса.