如何更改td标记内的元素位置

Question

我有一个页面，其中一个大表内有其他子表，将整个页面分成两部分。我的问题是如何更改td标签内所有元素的位置以便看起来不错？我现在的结果是：

Current result with no position formatting

我希望它看起来像这样：

The way it's supposed to look

我尝试使用CSS格式使用相对位置功能这样做

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