Tengo un tr y 3 td dentro de él. Necesito hacer el primer y tercer ancho de td 50% cada uno, y el segundo ancho de 100% y debajo de estas dos filas. Sé que es una tarea extraña, pero necesito hacer exactamente esto con css o js. ingrese la descripción de la imagen aquí

0
Егор Лебедев 10 ene. 2017 a las 19:56

3 respuestas

La mejor respuesta

Otro método, un poco más elegante, que utiliza la propiedad flex-box s order.

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>
7
Brett DeWoody 10 ene. 2017 a las 17:13

Esta no es la solución más elegante, así que intentaré pensar en otro método después de una deliciosa cena. Este método utiliza el posicionamiento para simplemente mover la segunda columna a una nueva fila. Requiere que su tabla tenga celdas de tabla de altura fija.

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>
4
Brett DeWoody 10 ene. 2017 a las 17:25

Qué pasa:

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);
 }
 }
 };

Esto cambia esto:

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

Para:

 <tr><td/><td/></tr>
 <tr><td>            </tr>
0
Jonas Wilms 10 ene. 2017 a las 17:08