html - 如何更改 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>