appjeniksaan Comments - Answer Overflow

appjeniksaan

•Created by appjeniksaan on 3/6/2024 in #front-end

Even/odd row styling with CSS Grid and subgrid, is this a good idea?

What is interesting to consider when replacing the elements, the browser will add a tbody. So then the table element could become display: block with a thead and tbody that are both display:grid. The other option is that both thead and tbody have to also be a subgrid, I first thought this might not be such a good solution, but it is very minimal. Example HTML would then be:

<table>
  <thead>
    <tr>  
      <th>Programming Language</th>
      <th>Creator</th>
      <th>First Release</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>C</td>
      <td>Dennis Ritchie</td>
      <td>1972</td>
    </tr>
    <!-- [...additional rows] -->
  </tbody>
</table>

<table>
  <thead>
    <tr>  
      <th>Programming Language</th>
      <th>Creator</th>
      <th>First Release</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>C</td>
      <td>Dennis Ritchie</td>
      <td>1972</td>
    </tr>
    <!-- [...additional rows] -->
  </tbody>
</table>

With the CSS:

table {
  display: grid; 
  grid-template-columns: repeat(3, 1fr);
}
thead, tbody, tr {
  display: grid; 
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
}
thead tr, tbody tr:nth-of-type(even) {
  background-color: white;
}
th {
  font-weight: bold;
}

table {
  display: grid; 
  grid-template-columns: repeat(3, 1fr);
}
thead, tbody, tr {
  display: grid; 
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
}
thead tr, tbody tr:nth-of-type(even) {
  background-color: white;
}
th {
  font-weight: bold;
}

I am going to try it together with the suggestions from Adrian Roselli and see if it works in all modern browsers or if I run into any issues.

17 replies

KPCKevin Powell - Community

•Created by appjeniksaan on 3/6/2024 in #front-end

Even/odd row styling with CSS Grid and subgrid, is this a good idea?

The prime reason for me to switch to this way of styling was to get flexbox sizing to the columns. Because we have a lot of columns and want to have some columns have as much space as possible, it is nice to have some min-width: max-content columns and then give the most important columns the space the need. With a traditional table I would have to introduce width calculation based on content, which I think is a bad idea. But I like the idea of resetting the style of the table elements and re-using them to keep it "standard". I will dive into those posts from Adrian Roselli, they seem really helpful, thanks.

17 replies

KPCKevin Powell - Community

•Created by appjeniksaan on 3/6/2024 in #front-end

Even/odd row styling with CSS Grid and subgrid, is this a good idea?

I think a th or td has display: table-cell, if you override it with flex that will break the table layout. You can put an element inside the the table cell. But there are some limitations with that. The situation gets even trickier if you want to have a absolute position to a relative of the cell, I think the specifications do not describe this situation and the rendering is different between different browsers.

17 replies

KPCKevin Powell - Community

•Created by appjeniksaan on 3/6/2024 in #front-end

Even/odd row styling with CSS Grid and subgrid, is this a good idea?

I agree that this choice should not be made without careful consideration, since keeping it standard and simple should always be your first choice. But in the situation I came up with this solution, I have other considerations to weigh as well and there the "standard" table is not really offering a solution that allows building to business requirements.

17 replies

KPCKevin Powell - Community

•Created by appjeniksaan on 3/6/2024 in #front-end

Even/odd row styling with CSS Grid and subgrid, is this a good idea?

The main reason is that you get full Flexbox layout support inside the CSS Grid based table. This means that you can use all the well known styling properties, while in a traditional table you have to use different properties with different limitations. With the CSS Grid based approach you also get a very flexible way of sizing columns based on their content. So one column can be max-content while 2 others have the same width based on 1fr. This is not really possible in table.

17 replies

Gaming

Programming