如何在表格行中重定位表格单元格？

Question

我有一个tr和3 td。我需要将第一和第三td宽度分别设为50％，第二个宽度为100％，并且在这两行之下。我知道这是一项奇怪的任务，但我需要用css或js做到这一点。

Answer 1

另一种更优雅的方法，使用flex-box的{​​{1}}属性。

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

Answer 2

这不是最优雅的解决方案，因此在尝试一些美味的晚餐后，我会想到另一种方法。此方法使用定位将第二列简单地移动到新行。它要求您的表具有固定高度的表格单元格。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

怎么样：

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

这改变了这个：

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

要：

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