Дизайнер, с которым я работаю, регулярно представляет проекты, в которых на странице будет несколько таблиц, обычно разбитых на абзацы или другое промежуточное содержимое. Он предпочитает, чтобы столбцы для каждой таблицы имели одинаковую ширину. Вот пример ...
Employees
--------------------------------------------------------
| Name | Start Date |
--------------------------------------------------------
| Bill | 10/22/1983 |
--------------------------------------------------------
| Jim | 04/14/2010 |
--------------------------------------------------------
| Jessica | 06/08/2002 |
--------------------------------------------------------
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
Lunch Menu
--------------------------------------------------------
| Name | Price |
--------------------------------------------------------
| Pizza Slice | $2.50 |
--------------------------------------------------------
| Pulled Pork Sandwich | $5.99 |
--------------------------------------------------------
| Fried Chicken Dinner | $7.99 |
--------------------------------------------------------
Я надеюсь найти решение только для html + css (s css), которое можно использовать повторно. Мой подход к этому пункту заключается в использовании единой сетки для содержимого документа ...
.grid-content {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-flow: row;
grid-gap: 5px;
}
h2,
p {
grid-column: 1/-1;
margin: 10px 0;
}
.header {
padding: 5px 10px;
background-color: #ddd;
}
.record {
padding: 5px 10px;
background-color: #eee;
}
<div class="grid-content">
<h2>Employees</h2>
<div class="header">Name</div>
<div class="header">Start Date</div>
<div class="record">Bill</div>
<div class="record">10/22/1983</div>
<div class="record">Jim</div>
<div class="record">04/14/2010</div>
<div class="record">Jessica</div>
<div class="record">06/08/2002</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<h2>Lunch Menu</h2>
<div class="header">Name</div>
<div class="header">Price</div>
<div class="record">Pizza Slice</div>
<div class="record">$2.50</div>
<div class="record">Pulled Pork Sandwich</div>
<div class="record">$5.99</div>
<div class="record">Fried Chicken Dinner</div>
<div class="record">$7.99</div>
</div>
Это близко к тому, что я ищу, но с этим подходом есть несколько проблем ...
Во-первых, это предотвращает перекрытие полей. Например, если у меня есть два абзаца с полем 10px сверху и снизу, между ними будет разрыв 20px, что означает, что для содержимого в сетке требуется собственный набор правил стилей.
Во-вторых, требуется, чтобы во всех таблицах было одинаковое количество столбцов, или, опять же, мне понадобятся правила содержания, определяющие стиль c, который не обязательно прост, если мы хотим позволить пользователю выбирать, какие столбцы
В-третьих, я бы очень предпочел использовать обертку вокруг содержимого таблицы, чтобы она больше содержалась в разметке, но этот подход требует, чтобы каждая ячейка находилась на том же уровне, что и любая другая часть содержимого. разделение сетки.
Есть и другие нюансы, но это мои текущие проблемы. Я бы хотел бы , чтобы избежать использования JavaScript, если смогу, поскольку проект, над которым я сейчас работаю, является довольно большим Angular приложением и уже довольно тяжелым для прослушивателей событий (таких как изменение размера окна) .
Использование реальных <table> вместо grid хорошо, я только что нашел сетки более гибкими. Что бы было фантазией c, если бы я мог иметь две независимые сетки, которые каким-то образом осведомлены о содержимом друг друга и соответственно изменяют размер своих столбцов.
Конечно, всегда есть возможность просто сообщить дизайнеру, "нет" если дело доходит до этого. (Пожав плечами)