絕對位置不確定的表格

我希望絕對定位的表格在表格邊緣和窗口邊緣之間具有15px，但除非我爲表格指定寬度，否則它會根據內容進行調整。絕對位置不確定的表格

設置style="position:absolute; left:15px; right:15px"給了我一個div而不是一個表所需的行爲。

表格width="100%"使表格100％的窗口寬度，然後將15px添加到兩邊導致滾動條和糟糕的定位表。

簡單地給出表width="95%"並居中它不會導致窗口重新調整大小的兩側的固定數量。

該表格是絕對的，因爲它需要在頁面的底部。

見fiddle

這似乎是我失去了一些東西很明顯，但我一直沒能弄明白或發現它在谷歌呢。

來源

2016-02-11 Ferdie

使用'寬度= 「100％」''與margin = 0' – Phiter

@ phiter-fernandes這會讓我沒有空間擺在桌子的兩邊。我希望問題中所述的表格左側和右側有15px。 – Ferdie

然後把表格放在一個帶'padding：15px'的div裏面。 – Phiter

CSS

.absoluteFill { 
    /*your styles*/ 
    margin:0; 
    width:calc(100% - 30px); 
}

來源

2016-02-11 12:53:00 djl

正是我需要的東西。謝謝 – Ferdie

不客氣！計算一個非常有用的函數，因爲我發現它一直使用它。 – djl

.borderClass { 
 
    border-width: 1px; 
 
    border-style: solid 
 
} 
 

 
.absoluteFill { 
 
    position: absolute; 
 
    left: 15px; 
 
    right: 15px; 
 
    margin: 0; 
 
    width: calc(100% - 30px); /*full width minus left and right*/ 
 
} 
 

 
.tblPosition { 
 
    bottom: 15px; 
 
} 
 

 
.divPosition { 
 
    top: 15px; 
 
    height: 100px; 
 
}

<table height="50%" class="borderClass absoluteFill tblPosition"> 
 
    <tr> 
 
    <td>This is not what I want</td> 
 
    </tr> 
 
</table> 
 

 
<div class="borderClass absoluteFill divPosition"> 
 
    This is what I want 
 
</div>

我希望這個答案將幫助您

來源

2016-02-11 12:50:41

試試這個

.absoluteFill { 
    position: absolute; 
    left: 15px; 
    right: 15px; 
    width: calc(100% - 30px); 
}

https://jsfiddle.net/ou5rza6b/

計算值的瀏覽器支持http://caniuse.com/#feat=calc

來源

2016-02-11 12:56:46 wishmaster

你必須改變只是CSS和它會在.tblPosition類，如下所示：

.tblPosition { 
    bottom: 15px; 
    max-width: 100%; 
    height: auto; 
    overflow: hidden; 
    display: block; 
}

來源

2016-02-11 14:09:08

絕對位置不確定的表格

回答

相關問題