Div內部表自動調整大小和左右邊距

我有一個以body html爲中心的800px寬度表。在這個表格裏面我想要一個DIV，它必須有10px的margin-left和10px的margin-right，其餘的是100％的表格寬度。Div內部表自動調整大小和左右邊距

嘗試使用div寬度100％，並給它的邊緣左側和右側，它看起來不好。

再次測試我只是給它的邊緣左側和右側，沒有給它一個寬度，它似乎就像在Chrome上DIV自動調整到全寬，左右邊界完美，工作良好。

問題是，如果它真的可以在所有瀏覽器上運行，或者我只是幸運地使用Chrome。這樣做的正確形式是什麼？

因爲該表是我裏面就像在下面的例子中一個div希望它有我的佈局的一部分：

<!doctype html><html lang="en"> 
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Testing Width</title></head><body> 

<table width="800" border="0" align="center" cellpadding="0" cellspacing="0"> 
<tr><td align="center" valign="top"> 

<div style="background-color:#000000; color:#cccccc; margin-left:10px; margin-right:10px;"> 
Testing auto-size of divs by default. 
Because the table is 800 px and I am not giving the div 
a width does it auto-resize 100% width 
less 10px left and 10px right margin? 
That means also that it alto-resizes to 780px? 
</div>

這不是一個代碼審查。我需要幫助，給它正確的寬度和利潤率，使其在所有瀏覽器

編輯：

如果該表是寬度的80％，我需要的股利爲100％的寬度加上保證金左，正確的10px？

來源

2015-04-23 Kamikaza

默認情況下，像div一樣的塊級元素將自動調整到父容器的寬度（考慮左/右邊距）。在這種情況下，父容器是800px寬表中的表格單元格。這應該適用於所有瀏覽器，因爲它是標準的CSS。 –

嘗試下載不同的瀏覽器並測試自己。它是確保代碼在瀏覽器之間交叉兼容的唯一可靠方法！ – AboutTime

其實你可以'calc'的'width屬性'：'div {width：calc（100％ - 20px）}' – maioman

您在代碼部分正確地做了它，但爲了更容易的開發和可維護性，您可以使用純粹的基於CSS的表格。此外，由於許多表屬性已被棄用，如valign和border，您最好使用標準CSS樣式。 HTML代碼：

<div class="table"> 
    <div class="tr"> 
     <div class="td"> 
      <div class="column"> 
      Testing auto-size of divs by default. 
      Because the table is 800 px and I am not giving the div 
      a width does it auto-resize 100% width 
      less 10px left and 10px right margin? 
      That means also that it alto-resizes to 780px? 
      </div> 
     </div> 
    </div> 
</div>

和相關的CSS代碼：

.table { 
    display: table; 
    width: 800px; 
    vertical-align: top; 
    padding: 0px; 
    border-spacing: 0px; 
    margin-left: auto; 
    margin-right: auto; 
} 
.tr { 
    display: table-row; 
} 
.td { 
    display: table-cell; 
    vertical-align: top; 
    margin-left: auto; 
    margin-right: auto; 
} 
.column { 
    margin-left: 10px; 
    margin-right: 10px; 
}

您可以瞭解爲什麼要使用基於CSS的表格，以及如何從here調整。

來源

2015-04-23 14:13:52 Pekka

我需要它是表格，因爲該網站已經可以像這樣工作，而且表格在所有瀏覽器甚至手機上都能正常工作。我編輯添加了有關液體表格使用80％寬度的表格和div內同樣像寬度前100％ - 邊緣左右。無論如何，如果桌子是液體80％寬度的屏幕，它會工作嗎？ – Kamikaza

它應該可以正常工作，但舊版IE或Android瀏覽器不支持calc。只需使用div上的10px頁邊距。無論如何，你應該用[jsfiddle]（http://jsfiddle.net/）測試它，或者直到你找到一個工作解決方案。 – Pekka

Div內部表自動調整大小和左右邊距

回答

相關問題