我有一個頁面,其中有一個大表格將整個頁面分成兩部分。我的問題是如何更改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