Javascript 如何在表格行内重新定位表格单元格？

我有一个tr和3个td在里面。我需要使第一个和第三个td宽度各为50%，第二个为100%，并在这两行下面。我知道这是一项奇怪的任务，但我需要用css或js来完成这项任务

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

桌子{ 表布局：固定； 宽度：100%； 位置：相对位置； 边界塌陷：塌陷； } 运输署{ 文本对齐：居中； 线高：30px； 背景颜色：灰色； 宽度：50%； } td:nth-child2{ 显示：块； 宽度：calc100%-2px； 位置：绝对位置； 顶部：calc100%+1px； 左：0； } A. B C是一个非常，非常，非常长的内容框，显示了单元格的高度是如何不起作用的。 那么：

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>

致：

---

另一个稍微优雅一点的方法，使用FlexBox的order属性

桌子{ 表布局：固定； 宽度：100%； 边界塌陷：塌陷； } tr{ 显示器：flex； 柔性包装：包装； } 运输署{ 文本对齐：居中； 线高：30px； 弹性：1； 宽度：50%； 边框：2倍纯白； 背景颜色：灰色； } td:nth-child2{ 顺序：3； 最小宽度：calc100%-6px； } A. B C是一个非常，非常，非常长的内容框，显示了单元格的高度是如何不起作用的。

---

你需要使用一个额外的tr。不，我只需要在一个tr中使用它。否则很容易询问语义方式，这是不可能的，你宁愿创建另一个tr或使用样式来完成我想说的工作，您不能更改内部的行为，因为第一个必须用作列，而不是用于创建网格。您可以尝试td高度不固定，可以通过添加内容动态更改。但我认为如果这个想法可行，我可以重新计算高度。如果是这样，那么我可以看看下一个可能的解决方案-。@brett，它将实际用于td:nth-child2{top:100%；}@Γ搋搋搋搋搋搋搋搋搋搋搋搋25611。我已经更新了解决方案以使用可变高度单元格。

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