Skip to main content
5 of 6
Rollback to Revision 3
Joel Brown
  • 14.3k
  • 4
  • 54
  • 65

How to place two <td> elements into a single CSS grid cell

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:

tabular format example

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:

card format example

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:

not what I was hoping for

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;.
Joel Brown
  • 14.3k
  • 4
  • 54
  • 65