html表格寬度>頁面寬度右填充不工作

Question

我有一個表有很多列，我需要的列是相同的寬度，所以表總寬度大於頁面寬度，這很好，因爲瀏覽器顯示水平滾動條。我無法解決的問題是，儘管左側和頂部填充都可以，但正確的填充不起作用，表右端和瀏覽器框架之間沒有空間。

<table> 
    <tr><td>A</td><td>B</td><td>C</td></tr> 
    <tr><td>D</td><td>E</td><td>F</td></tr> 
    <tr><td>G</td><td>H</td><td>I</td></tr> 
</table> 

table { 
    width: 200%; 
    padding: 10px 0px 10px 0px; 
    background-color: #800000; 
} 
td { 
    background-color: #ffa500; 
} 

這裏有一個fiddle

Answer 1

正如歐麥爾A.答案也提到了，您已經使用的填充作爲填充：10px的0像素10px的0像素;這意味着，填充頂部和底部是10px，填充左右是0px;使用它作爲 填充：10px如果你想在所有方面。

但是，這裏是提到的例子，它似乎你不想填充。實際上，您需要將保證金權限作爲表格右側的空白應用。即使你把保證金的價值放在右邊，它也不會起作用。

它發生這種情況，因爲由於佈局寬度大於100％，因此元素+邊距右側現在擴展到視口之外，並且完成視口寬度被表佔用。使查看端口小於100％並存在邊距。你給了你的桌子200％的寬度。這是什麼的200％？整個頁面正文。所以，這意味着，您希望表格是其父容器的200％。現在，像margin這樣的東西被應用於一個元素，並與其父元素容器等周圍元素進行比較。但是在右側，元素大小超出了容器大小。所以，保證金等屬性沒有任何視覺效果。你可以在下面的代碼片段中看到它。我已將表格封裝在div中以顯示保證金的應用。

div{ 
 
\t \t overflow:auto; 
 
\t \t border:7px solid black; 
 
\t } 
 
\t 
 
\t table { 
 
\t \t width: 80%; \t \t 
 
    margin-right:150px; 
 
\t \t background-color: #800000; 
 
\t \t display:inline-block; 
 
\t } 
 

 
\t td { 
 
\t \t background-color: #ffa500; 
 
\t \t }

<div> 
 
<table> 
 
<thead></thead> 
 
<tbody> 
 
    <tr><td>A</td><td>B</td><td>C</td></tr> 
 
    <tr><td>D</td><td>E</td><td>F</td></tr> 
 
    <tr><td>G</td><td>H</td><td>I</td></tr> 
 
</tbody> \t 
 
</table> 
 
</div>

但是當你把表格的寬度小於100％，保證金的權利將開始自己申請相比，其周圍的元素。因爲現在，默認情況下，表格寬度+邊距右邊<文檔正文的寬度，這是窗口視口的100％。所以，你想要達到的效果可以通過將表格包裝在像div這樣的塊級元素中，並允許它擴展div來創建。給它相對定位，然後定義它應該從右側放置5px。如果您還指定了左側，則左側會覆蓋右側。

Another reference

div{ 
 
\t \t overflow:auto; 
 
\t \t position:relative; 
 
\t \t right:5px !important; 
 
\t \t height:100%; 
 
\t } 
 
\t 
 
\t table { 
 
\t \t width: 200%; 
 
\t \t background-color: #800000; 
 
\t \t 
 
\t } 
 

 
\t td { 
 
\t \t background-color: #ffa500; 
 
\t \t }

<div> 
 
<table> 
 
<thead></thead> 
 
<tbody> 
 
    <tr><td>A</td><td>B</td><td>C</td></tr> 
 
    <tr><td>D</td><td>E</td><td>F</td></tr> 
 
    <tr><td>G</td><td>H</td><td>I</td></tr> 
 
</tbody> \t 
 
</table> 
 
</div>

Answer 2

嘗試只使用填充右：12px的; 我認爲這將工作

Answer 3

作爲一般的經驗法則，認爲padding爲內向間距，margin爲向外間距。

話雖這麼說，如果table的寬度設置爲100%的table元素將不適用margin-right，所以我會建議與margin-right: 10px;例如包裹在div的table。

更新：

Here's a working fiddle。如果您嘗試模擬寬表，請記住table將採用所有可用寬度，無需將其設置爲width: 200%;，因爲這會給您帶來意想不到的結果。

Answer 4

爲填充速記屬性的CSS語法如下：

填充：右上左下;

padding: 10px 0px 10px 0px; 

這意味着：

padding-top: 10px; 
padding-right: 0px; 
padding-bottom: 10px; 
padding-left: 0px; 

這是正常的，因此，你的表的行爲像

，並按如下設置它。

如果你與你的瀏覽器的檢查檢查你的小提琴，你有這樣的結果：

你可以看到身體有餘量的8像素。 而表...

...已填充左側和右側設置爲0px。

PS：縮放可以很好地查看圖像，或者點擊它。

Answer 5

根據Johnny Kutnowski的說法，將寬度設置爲200％不會得到明確的結果，這是正確的。 此外，如果您依賴於瀏覽器的滾動，那麼即使您將表格放入div中，它也會超出並且堅持到屏幕的角落。

試試這個代碼，如果它可以接受有一個div如果表寬度超過了滾動。

既然你提到你有多少列：

<div class="container"> 
    <table> 
     <tr><td>A</td><td>B</td><td>C</td><td>A</td><td>B</td><td>C</td> 
     <td>A</td><td>B</td><td>C</td><td>A</td><td>B</td><td>C</td> 
     <td>A</td><td>B</td><td>C</td><td>A</td><td>B</td><td>C</td> 
     <td>A</td><td>B</td><td>C</td><td>A</td><td>B</td><td>C</td> 
     </tr> 
     <tr><td>D</td><td>E</td><td>F</td><td>A</td><td>B</td><td>C</td> 
     <td>A</td><td>B</td><td>C</td><td>A</td><td>B</td><td>C</td> 
     <td>A</td><td>B</td><td>C</td><td>A</td><td>B</td><td>C</td> 
     <td>A</td><td>B</td><td>C</td><td>A</td><td>B</td><td>C</td> 
     </tr> 
     <tr><td>G</td><td>H</td><td>I</td><td>A</td><td>B</td><td>C</td> 
     <td>A</td><td>B</td><td>C</td><td>A</td><td>B</td><td>C</td> 
     <td>A</td><td>B</td><td>C</td><td>A</td><td>B</td><td>C</td> 
     <td>A</td><td>B</td><td>C</td><td>A</td><td>B</td><td>C</td> 
     </tr> 
    </table> 
</div> 


table { 
    width: 100%; 
    padding: 10px 0px 10px 0px; 
    background-color: #800000; 

} 
td { 
    background-color: #ffa500; 
    min-width: 50px !important; 
} 

.container { 
    padding-right: 100px !important; 
    overflow: auto; 
} 

試試這個JsFiddle

Answer 6

你不能設置填充用CSS表元素。只有td像

table td {padding: 10px;}