Is there a way to display table columns as rows?

Question

I inherited some code that takes in a data source and renders that data as a HTML table as such:

<table>
  <tr>
    <td>Mrs</td>
    <td>Jane</td>
    <td>Fonda</td>
  </tr>
  <tr>
    <td>Mr</td>
    <td>William</td>
    <td>Shakespeare</td>
  </tr>
</table>

I would like the last table cell td content (Fonda, Shakespeare) to display as a new row beneath its original row. Is there a way to accomplish this via CSS?

Answer 1

it cannot be done without javascript. but still I did my best. I hope you can benefit from it and improve it.

I know it might not be exactly what you want.

https://jsfiddle.net/zj8r1amh/1/

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

  td {
    border: 1px solid black;
    padding: 8px;
    position: relative;
  }
  td:last-child{border:0 none}
  td:last-child::after {
    content: attr(data-content);
    position: absolute;
    left: -113px;
    top: 100%;
    white-space: nowrap;
    background-color: white;
    border: 1px solid black;
    display: table-cell;
    padding: 8px;
    margin-top:34px
  }
</style>

<table>
  <tr>
    <td>Mrs</td>
    <td>Jane</td>
    <td data-content="Fonda"></td>
  </tr>
  <tr>
    <td>Mr</td>
    <td>William</td>
    <td data-content="Shakespeare"></td>
  </tr>
</table>

Answer 2

You can try this code. Note that I am note using classes or id (just tag name) you can be more pecific in targetting by looking at the class or the id for selecting table and row. The initial code has been edited to better answer the question

const theTable = document.querySelector('table')
const theRows = Array.from(document.querySelectorAll('table tr'))
let arrayOfRows = []


theRows.forEach(
    row=>{
        arrayOfRows.push(row)
    }
)

theTable.removeChild(theTable.firstElementChild)

for(let i=0; i<(theRows.length);i++){
    theTable.appendChild(arrayOfRows[i]) 
    let tr = document.querySelector('tr:last-child')   
    let node = tr.cloneNode(true) 
    theTable.appendChild(node)  
    let td = tr.querySelectorAll('td')
    let tdLastChild = tr.querySelector('td:last-child')
    td.forEach((td)=>{
        if(td!=tdLastChild){
            td.innerHTML=''
        }
    }) 
    // tr.style.display = 'flex' you can uncomment this line if you want the last td to be at the start of the line
    theTable.appendChild(arrayOfRows[i])   

    let trFirst = document.querySelectorAll('tr:nth-child(odd)') 
    trFirst.forEach((elem,idx)=>{
        let tdOddTr = trFirst[idx].querySelectorAll('td')  
        let tdOddTrLastElem = trFirst[idx].querySelector('td:last-child')  
        tdOddTr.forEach((tdElem)=>{
            if(tdElem===tdOddTrLastElem){
                tdElem.innerHTML=''
            }
        })   
    })    
}

<table>
        <tr>
            <td>Mrs</td>
            <td>Jane</td>
            <td>Fonda</td>
            <td>Actor</td>
        </tr>
        <tr>
            <td>Mr</td>
            <td>William</td>
            <td>Shakespeare</td>
            <td>poete</td>
        </tr>
        <tr>
            <td>Mr</td>
            <td>John</td>
            <td>Wayne</td>
            <td>Actor</td>
          </tr>
      </table>