tdタグ内の要素の位置を変更する方法

Question

ページ全体を2つの部分に分割する1つの大きな表の中に他のサブ表があるページがあります。私の質問は、それが素敵に見えるようにtdタグ内のすべての要素の位置を変更するにはどうすればいいですか？私が今持っている結果はここにある：

Current result with no position formatting

私はそれがこのように見えるようにしたい：私は、CSSは次のように相対的な位置の機能を使用して書式設定でそれを行うことを試みた

The way it's supposed to look

この

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

それはとてもうまく動作しますが、ズームインするとこのページがブラウザでズームアウトされます。電子は大きな混乱（デフォルトでは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>