表填充不能正常工作

我有一個表格，它坐落在一個充滿正文文本和其他內容的父div中。我有以下的CSS這似乎不工作：表填充不能正常工作

table {width:100%; padding: 0 50px 0 50px;}

當我使用的利潤率，而不是填充，它的工作原理，但是，寬度爲：100％，使用的利潤率scoots整個事情了父DIV的。我想我可以減少寬度或指定一個確切的像素量，但網站的其餘部分會隨着屏幕尺寸的縮放而變化，我希望這樣也能像這樣工作。

來源

2014-02-18 Hank

您可以設置保證金*和*表格的寬度百分比。 – Blazemonger

可能的重複：http://stackoverflow.com/questions/1750670/how-do-you-specify-table-padding-in-css-table-not-cell-padding – feeela

有一些與表有關的特殊屬性。您正在尋找的是border-spacing。

table { 
    width: 100%; 
    border-collapse: separate; 
    border-spacing: 0 50px; 
}

例子：http://jsfiddle.net/feeela/fPuQ6/

UPDATE：我自己搗鼓我必須承認玩弄，我錯了，告訴說：「一表沒有填充」之後。桌面上的填充工作正常 - 至少在Chrome和Opera（12）中查看時。下面的代碼片段應該千方百計想讓你想得：

table { 
    width: 100%; 
    padding: 0 50px 0 50px; 
}

看到小提琴的更新版本：http://jsfiddle.net/feeela/fPuQ6/3/

但是我一直在想，爲什麼填充未添加到寬度爲元素與display: block;。

參見：

來源

2014-02-18 20:17:08 feeela

您可以在表定義中添加單元格邊距或者如果你想使用CSS然後使用可以試試這個：

如果使用CSS：

<style type="text\css"> 
.table { 
     width: 100%;   
     border-top:1px solid red; 
     border-right:1px solid red; 
     border-collapse:collapse; 
    } 
.table td { 
    padding: 7px; 
    border-bottom:1px solid red; 
    border-left:1px solid red; 
} 
</style> 

<table class="table"> 
    <tr><td>Cell1a</td><td>Cell1b</td><td>Cell1c</td></tr> 
    <tr><td>Cell2a</td><td>Cell2b</td><td>Cell2c</td></tr> 
    <tr><td>Cell3a</td><td>Cell3b</td><td>Cell3c</td></tr> 
</table>

如果使用內聯：

<table cellpadding="9" cellspacing="5" style="border-collapse:collapse;" border="1"> 
    <tr><td>Cell1a</td><td>Cell1b</td><td>Cell1c</td></tr> 
    <tr><td>Cell2a</td><td>Cell2b</td><td>Cell2c</td></tr> 
    <tr><td>Cell3a</td><td>Cell3b</td><td>Cell3c</td></tr> 
</table>

在這裏你可以看到在行動這一點： http://jsfiddle.net/b5NW5/1/

希望它可以幫助

來源

2014-02-18 20:32:05 kheya

現有的回答表明，CSS可以設置邊界 - [方向]分開。但是，複製舊式table cellpadding="7" border="1"的更簡單的css-only解決方案可以如下所示。在CSS：

table { 
    border-collapse:collapse; 
    width: 100%; 
} 
td { 
    padding: 7px; 
    border:1px solid; 
}

顯示在此琴：http://jsfiddle.net/b5NW5/77

來源

2015-09-06 11:41:39 murspieg

表填充不能正常工作

回答

相關問題