Html Question posted in
Some basic documentation can be found here.

Html – td cell to appear directly below th cell

I have a table html like the following:

<table>
  <tbody>
    <tr>
      <th>Header 1</th>
      <td>Data 1</td>
      <th>Header 2</th>
      <td>Data 2</td>
    </tr>
    <tr>
      <th>Header 3</th>
      <td>Data 3</td>
      <th>Header 4</th>
      <td>Data 4</td>
      <th>Header 5</th>
      <td>Data 5</td>
    </tr>
  </tbody>
</table>

I want the table to look something like this:

 Header1   Header2         
 td1       td2   
 Header3   Header4   Header5 
 td3       td4       td5

Can this be achieved using CSS without changing the html structure?

Tags:

2

Answers


  1. 0

    Please follow table tags structure rules.

    BUT if you insist to use Table tags.

    Try table nesting

    <table >
    <tbody>
       
        <tr>
            <td>
              <table>
                  <tr><th>Header 1</th></tr>
                  <tr><td>Data 1</td></tr>
              </table>
            </td> 
            <td>
              <table>
                  <tr><th>Header 2</th></tr>
                  <tr><td>Data 2</td></tr>
              </table>
            </td>
        </tr>
        <tr>
            <td>
              <table>
                  <tr><th>Header 3</th></tr>
                  <tr><td>Data 3</td></tr>
              </table>
            </td> 
            <td>
              <table>
                  <tr><th>Header 4</th></tr>
                  <tr><td>Data 4</td></tr>
              </table>
            </td>
            <td>
              <table>
                  <tr><th>Header 5</th></tr>
                  <tr><td>Data 5</td></tr>
              </table>
            </td>
        </tr>
        
    </tbody>
</table>

    OR use BR or styling the div for heading and data

     <table >
        <tbody>
           
            <tr>
                <td>
                      Header 1
                      <br>
                      Data 1
                </td> 
                <td>
                      Header 2
                      <br>
                      Data 2
                </td> 
            </tr>
            <tr>
                <td>
                      Header 3
                      <br>
                      Data 3
                </td> 
                <td>
                      Header 3
                      <br>
                      Data 3
                </td> 
                <td>
                      Header 3
                      <br>
                      Data 3
                </td> 
            </tr>
            
        </tbody>
    </table>
    Login or Signup to reply.
  2. 0

    You could lay the table out as a grid:

    <style>
  table {
    display: grid;
    grid-template-columns: repeat(3, auto);
    width: fit-content;
  }
  
  tbody,
  tr {
    display: contents;
  }
  
  tr:first-child th {
    grid-row: 1;
  }
  
  tr:first-child td {
    grid-row: 2;
  }
  
  tr:last-child th {
    grid-row: 3;
  }
  
  tr:last-child td {
    grid-row: 4;
  }
</style>
<table>
  <tbody>
    <tr>
      <th>Header 1</th>
      <td>Data 1</td>
      <th>Header 2</th>
      <td>Data 2</td>
    </tr>
    <tr>
      <th>Header 3</th>
      <td>Data 3</td>
      <th>Header 4</th>
      <td>Data 4</td>
      <th>Header 5</th>
      <td>Data 5</td>
    </tr>
  </tbody>
</table>

    Note: I don’t necessarily recommend this unless you are really stuck with that weird HTML structure and it absolutely can’t be changed. The semantics are a mess with the given structure, the th should be in the first row as headings. However, if you are truly stuck with the structure then grid will lay things out the way you want.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search