How can I extend a CSS grid to create overhangs?

Question

Semantically I have a table so I would use the HTML <table> element. For grouping rows I can use <tbody>:

<table>
    <tbody>
        <tr><td>A</td><td>1</td></tr>
        <tr><td>B</td><td>1</td></tr>
        ...
    </tbody>
    <tbody>
        <tr><td>a</td><td>1</td></tr>
        <tr><td>b</td><td>2</td></tr>
        ...
    </tbody>
</tbody>

At each <tbody> I want to (outside of the table on the left) have a link/heading/anchor identifying that subsection. If I make the <table> display:grid and have each <tbody> generate a row I would have the grid lines necessary to place the link/heading/anchor to the left.

However, these grid lines would be contained by the table and not extend beyond, so I couldn't "lay" anything on them. I guess I'm looking for an inverse of subgrid which lets you have a bigger grid and nest a subgrid into it. But I want to have a grid and extend from the smaller grid:

Do NOT make an actual table into display:grid. Use divs in proper containers. — Paulie_D
– Paulie_D, Commented Oct 8 at 19:06
I'm on the same page along @Paulie_D. Use div's instead table. With some div tags and proper css styling by using Grid layout. — Jorge Luiz
– Jorge Luiz, Commented Oct 8 at 19:13
I have no problem with using display: grid on an HTML table. but it's not at all clear how the link/heading/anchor fits into that semantic table structure, as it surely should. Can you clarify that? — Alohci
– Alohci, Commented Oct 8 at 21:16
I understand your requirement to keep it as a table for the semantics, but I'm not clear why you are not wanting that left hand side info to be part of the table - could you explain why it cannot be? — A Haworth
– A Haworth, Commented Oct 9 at 9:17

A Haworth · Accepted Answer · 2025-10-18 07:15:40Z

As you want to keep an HTML table for semantic reasons, incorporate the first column with the DATA (links) into it.

This snippet put them into the first cell of the first row of each group. They are then set to span their rowset.

There are various ways of drawing the 'extended' line. This snippet puts a border round each cell then removes the ones that aren't needed.

<style>
  table {
    border-collapse: collapse;
  }

  td {
    border: solid 1px black;
  }

  tr:first-child td {
    border-top: solid 1px transparent;
    border-left: solid 1px transparent;
    vertical-align: bottom;
  }
</style>
<table>
  <tbody>
    <tr>
      <td rowspan="4">DATA</div>
      </td>
      <td>A</td>
      <td>1</td>
    </tr>
    <tr>
      <td>B</td>
      <td>1</td>
    </tr>
    <tr>
      <td>C</td>
      <td>1</td>
    </tr>
    <tr>
      <td>D</td>
      <td>1</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td rowspan="2">DATA</div>
      </td>
      <td>a</td>
      <td>1</td>
    </tr>
    <tr>
      <td>b</td>
      <td>2</td>
    </tr>
  </tbody>
  </tbody>

Collectives™ on Stack Overflow

How can I extend a CSS grid to create overhangs?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related