CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Егор Лебедев
Егор Лебедев

Reputation: 1336

How to relocate table cell inside a table row?

I have a tr and 3 td inside of it. I need to make first and third td width 50% each, and second 100% width and under this two rows. I know that it is strange task, but I need to do exactly this with css or js.enter image description here

Upvotes: 0

Views: 328

Answers (3)

Brett DeWoody
Brett DeWoody

Reputation: 62841

This isn't the most elegant solution so I'll try to think of another method after some yummy dinner. This method uses positioning to simply move the 2nd column to a new row. It requires that your table have fixed-height table cells. 

table {
  table-layout: fixed;
  width: 100%;
  position: relative;
  border-collapse: collapse;
}

td {
  text-align: center;
  line-height: 30px;
  background-color: gray;
  width: 50%;
}

td:nth-child(2) {
  display: block;
  width: calc(100% - 2px);
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
}
<table>
<tr>
  <td>A</td>  
  <td>B</td> 
  <td>C is a really, really, really long content box, showing how the height of a cell doesn't make a difference.</td>  
</tr>
</table>

Upvotes: 4

Brett DeWoody
Brett DeWoody

Reputation: 62841

Another, slightly more elegant method, using flex-box's order property. 

table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapsed;
}

tr {
  display: flex;
  flex-wrap: wrap;
}

td {
  text-align: center;
  line-height: 30px;
  flex: 1;
  width: 50%;
  
  border: 2px solid white;
  background-color: gray;
}

td:nth-child(2) {
  order: 3;
  min-width: calc(100% - 6px);
}
<table>
<tr>
  <td>A</td>  
  <td>B</td> 
  <td>C is a really, really, really long content box, showing how the height of a cell doesn't make a difference.</td> 
</tr>
</table>

Upvotes: 7

Jonas Wilms
Jonas Wilms

Reputation: 138407

What about:

window.onload=()=>{
//get all trs
var trs=document.getElementsByTagName("tr");
for(i in trs){
//loop trough
var tr=trs[i];
if(tr.childNodes.length>2){
  //lets split up:
  var nl=document.createElement("tr");
  tr.parentElement.insertBefore(tr,nl);
  nl.appendChild(tr.childNodes[childNodes.length);
 }
 }
 };

This changes this:

<tr><td/><td/><td></tr>

To:

 <tr><td/><td/></tr>
 <tr><td>            </tr>

Upvotes: 0

Related Questions