2017-12-18 531 views
0

我有一个页面,其中有一个大表格将整个页面分成两部分。我的问题是如何更改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>

+0

尝试EM或%,而不是PX恩。 '.leftSide { position:relative; 底部:50%; //或15.625em }' – zer00ne

回答

0

希望,这有助于:)

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

+0

非常感谢,它的工作原理! :3 –

+0

@RobertBaratheon没问题:)确保接受答案。干杯七国之王 – 2017-12-18 10:21:02

+0

这是另一个愚蠢的问题..左侧的子表有点不对(穿过中线)。这是无法避免的,可以吗?但无论如何,非常感谢。 –