我有一个页面,其中有一个大表格将整个页面分成两部分。我的问题是如何更改td
标签中所有元素的位置以便看起来很好?结果我现在是在这里:如何更改td标签内的元素位置
Current result with no position formatting
我希望它看起来像这样的:
我试着使用像相对位置的功能与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>
尝试EM或%,而不是PX恩。 '.leftSide { position:relative; 底部:50%; //或15.625em }' – zer00ne