如何更改td標籤內的元素位置

Question

我有一個頁面，其中有一個大表格將整個頁面分成兩部分。我的問題是如何更改td標籤中所有元素的位置以便看起來很好？結果我現在是在這裏：

Current result with no position formatting

我希望它看起來像這樣的：

The way it's supposed to look

我試着使用像相對位置的功能與CSS格式做這

.leftSide 
{ 
    position: relative; 
    bottom:250px; 
} 

它的工作得很好，但是當我放大 - 在瀏覽器中縮小這個頁面時，它變成了一個on e大混亂（在td標籤的中間默認元素，但是我這樣做，元素不在表格中）。我怎樣才能避免它？ 我下面整個代碼：

.splitTable { 
 
    width: 100%; 
 
    height: 100%; 
 
    border: 6px solid #05788D; 
 
    border-collapse: collapse; 
 
} 
 

 
.sides { 
 
    border: 6px solid #05788D; 
 
} 
 

 
.SSRSSObjectCostTableTest { 
 
    border: 3px solid #05788D; 
 
    border-collapse: collapse; 
 
    width: 30%; 
 
} 
 

 
.sideForSSRSSTables { 
 
    border: 3px solid #05788D; 
 
} 
 

 
.partsTable { 
 
    height: 7%; 
 
    width: 95%; 
 
    border-collapse: collapse; 
 
} 
 

 
.sideForPartsTable { 
 
    border: 3px solid #05788D; 
 
} 
 

 
.leftSide { 
 
    position: relative; 
 
    bottom: 250px; 
 
} 
 

 
.rightSide { 
 
    position: relative; 
 
    bottom: 250px; 
 
}

<table class="splitTable"> 
 
    <tr> 
 
    <td class="sides"> 
 
     <div class="leftSide"> 
 
     <span class="chooseText">Choose</span> 
 
     <table class="SSRSSObjectCostTableTest" width="25%"> 
 
      <tr> 
 
      <td class="sideForSSRSSTables">Say this is 1st element</td> 
 
      <td class="sideForSSRSSTables">Say this is 2nd element</td> 
 
      </tr> 
 
     </table> 
 
     </div> 
 
    </td> 
 

 
    <td class="sides"> 
 
     <div class="rightSide"> 
 
     <span class="partsText">Parts</span> 
 
     <button type="button" class="addButton">+Add Part</button> 
 

 
     <!--<table class="outerPartTable">--> 
 

 
     <table class="partsTable"> 
 
      <td class="sideForPartsTable" width="5%">Expand button</td> 
 
      <td class="sideForPartsTable">Title + sum1 + sum2</td> 
 
      <td class="sideForPartsTable" width="5%">edit</td> 
 
      <td class="sideForPartsTable" width="5%">remove</td> 
 

 
     </table> 
 
     <!--</table>--> 
 
     </div> 
 
    </td> 
 

 
    </tr> 
 
</table>

Answer 1

希望，這有助於:)

.splitTable { 
 
    width: 100%; 
 
    height: 100vh; 
 
    border: 6px solid #05788D; 
 
    border-collapse: collapse; 
 
} 
 

 
.sides { 
 
    border: 6px solid #05788D; 
 
    position: relative; 
 
    width: 50%; 
 
} 
 

 

 
.sideForSSRSSTables { 
 
    border: 3px solid #05788D; 
 
} 
 

 
.partsTable { 
 
    height: 7%; 
 
    width: 95%; 
 
    margin-top:30px; 
 
    border-collapse: collapse; 
 
} 
 

 
.sideForPartsTable { 
 
    border: 3px solid #05788D; 
 
} 
 

 
.leftSide { 
 
    display: flex; 
 
    flex-direction:flex-end; 
 
    position: absolute; 
 
    top: 20px; 
 
    width:90%; 
 
    left:50%; 
 
    transform:translateX(-50%); 
 
} 
 

 
.leftSide>* { 
 
    flex: 1; 
 
} 
 

 
.SSRSSObjectCostTableTest { 
 
    border: 3px solid #05788D; 
 
    margin: 5px; 
 
    border-collapse: collapse; 
 
} 
 

 

 
.rightSide { 
 
    position: absolute; 
 
    top: 20px; 
 
    left:50%; 
 
    transform:translateX(-50%); 
 
    width:90%; 
 
} 
 

 
.addButton { 
 
    float:right; 
 
    margin-right:5%; 
 
}

<table class="splitTable"> 
 
    <tr> 
 
    <td class="sides"> 
 
     <div class="leftSide"> 
 
     <span class="chooseText">Choose</span> 
 
     <table class="SSRSSObjectCostTableTest"> 
 
      <tr> 
 
      <td class="sideForSSRSSTables">Say this is 1st element</td> 
 
      <td class="sideForSSRSSTables">Say this is 2nd element</td> 
 
      </tr> 
 
     </table> 
 
     </div> 
 
    </td> 
 

 
    <td class="sides"> 
 
     <div class="rightSide"> 
 
     <span class="partsText">Parts</span> 
 
     <button type="button" class="addButton">+Add Part</button> 
 

 
     <!--<table class="outerPartTable">--> 
 

 
     <table class="partsTable"> 
 
      <td class="sideForPartsTable" width="5%">Expand button</td> 
 
      <td class="sideForPartsTable">Title + sum1 + sum2</td> 
 
      <td class="sideForPartsTable" width="5%">edit</td> 
 
      <td class="sideForPartsTable" width="5%">remove</td> 
 

 
     </table> 
 
     <!--</table>--> 
 
     </div> 
 
    </td> 
 

 
    </tr> 
 
</table>