I'm building a web application and giving CSS grids a serious try for the first time (without using a CSS framework like Bootstrap). In various places in my app it makes sense to present tabular data in a good old-fashioned table, at least when the viewport is big enough, like in a desktop browser. For example, like this:
For mobile browsers, the tabular view makes much less sense and instead I'd like to take the same data and present it in more of a full-screen width list of cards, something like this:
I'm not married to the underlying HTML for this being <table>
based, but it makes a lot of sense to me to build the page this way for semantic and accessibility purposes.
<table class="data-list">
<thead>
<tr>
<th>Day</th>
<th>Date</th>
<th>Time</th>
<th>Event</th>
</tr>
</thead>
<tbody>
<tr>
<td>Friday</td>
<td>October 23</td>
<td>8:00pm</td>
<td>Event A</td>
</tr>
<tr>
<td>Saturday</td>
<td>October 24</td>
<td>10:00am</td>
<td>Event B</td>
</tr>
</tbody>
</table>
Ultimately, I'd like to be able to apply different CSS to the same underlying html based solely on a media query in order to achieve this different visual presentation.
The CSS that I've tried for the mobile (card) layout to this point is as follows:
table.data-list {
display: grid;
border-collapse: collapse;
min-width: 100%;
grid-template-columns: min-content min-content max-content 1fr;
thead {
display: none;
}
tbody,
tr {
display: contents;
}
row-gap: var(--grid-work-row-spacing);
tr td {
background-color: var(--cs-secondary-md);
color: var(--cs-white-ish);
}
td {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: var(--grid-work-table-vertical-padding) var(--grid-work-table-horizontal-padding);
font-size: var(--grid-work-row-label-height);
}
tr td:nth-child(1) {
grid-column: 1/3;
}
tr td:nth-child(2) {
grid-column: 1/3;
}
tr td:nth-child(3) {
grid-column: 3/4;
}
tr td:nth-child(4) {
grid-column: 4/5;
}
}
Note in particular that I was hoping to pull the first and second table data items into a shared cell (spanning two columns) using the grid-column: 1/3;
for each of tr td:nth-child(1)
and tr td:nth-child(2)
. This did not work, instead what it did was flow the 2nd, 3rd and 4th data items to a new grid row, like so:
Question: Is it possible using CSS to pull two td elements into a single CSS grid cell (and if so, how)?
Runable example: https://codepen.io/joelbrown/pen/LYZxXEx
Solved:
Runable solution: https://codepen.io/joelbrown/pen/OJXWdaz With thanks to @G-Cyrillus for identifying the solution.
To summarize, in case anyone else is looking at a similar situation:
- Add
grid-auto-flow: row dense;
to the main grid element (i.e. table) - For all the
<td>
elements that follow the one being "merged" (in my case:tr td:nth-child(2) ~ td
add both a row span:grid-row: span 2;
and an alignment:align-self: stretch;
- if you want the background to be distinct from the rest of the page. - Again for the case where the background of the "card" is a distinct colour, add spacing between cards for the td being merged and all subsequent ones (my case:
tr td:nth-child(n+2)
) like so:margin-bottom: 0.5rem;
.