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

  • Z时代
  • 2024-01-10
  • 分类：问答

我有一个页面，其中有一个大表格将整个页面分成两部分。我的问题是如何更改td标签中所有元素的位置以便看起来很好？结果我现在是在这里：如何更改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>

回答：

希望，这有助于:)

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

以上是 如何更改td标签内的元素位置 的全部内容， 来源链接： utcz.com/qa/261663.html

回到顶部