Ask Your Question

How can a table-row caption be created using table-layout and mimicking the colspan feature?

asked 2021-09-05 11:00:00 +0000

devzero gravatar image

edit retag flag offensive close merge delete

1 Answer

Sort by ยป oldest newest most voted

answered 2021-10-08 13:00:00 +0000

scrum gravatar image

One approach to creating a table-row caption using table-layout and mimicking the colspan feature is to use CSS pseudo-elements to add a visual indicator of the caption's relationship to the table rows.

First, create a table with a header row containing the column headers, and then add an additional row above the first row to serve as the caption row. Use the "table-layout: fixed" property to ensure that the column widths are fixed, and use "width: 100%" to set the table to be the full width of its container.

To mimic the colspan feature, use the "position: relative" property on the caption row, and then use CSS pseudo-elements ("::before" and "::after") to create full-width background elements that span the row's height and cover the corresponding table cells. The background elements can be styled with the desired background color, border, and other visual properties.

Here's an example code snippet demonstrating this approach:

<table style="table-layout: fixed; width: 100%;">
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  <tr class="caption">
    <td colspan="3">This is a caption for the table</td>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
    <td>Row 1, Column 3</td>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
    <td>Row 2, Column 3</td>
  <!-- add more rows as needed -->

And here's the corresponding CSS:

.caption {
  position: relative;
  /* adjust background color, border, etc. as desired */
.caption::before, .caption::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* adjust background color, border, etc. as desired */
.caption::before {
  z-index: -1;

Note that the pseudo-element with the "::before" selector is positioned behind the caption row, while the one with the "::after" selector is positioned in front of it. This creates the appearance of a full-width caption row that spans multiple columns.

edit flag offensive delete link more

Your Answer

Please start posting anonymously - your entry will be published after you log in or create a new account. This space is reserved only for answers. If you would like to engage in a discussion, please instead post a comment under the question or an answer that you would like to discuss

Add Answer

Question Tools


Asked: 2021-09-05 11:00:00 +0000

Seen: 6 times

Last updated: Oct 08 '21