如何填充表格中每個單元格的填充？

純CSS用於HTML代碼;當默認生成表格時，單元格中有很多空格。如何填充表格中每個單元格的填充？

以下是對於相同的HTML：

<table class="pure-table fullWidth"> 
<tbody> 
    <tr class="pure-table-odd"> 
    <td> 
    <label class="boldText">Bank</label> 
    </td> 
    <td> 
    <label class="boldText">Japha Bank</label> 
    </td> 
    </tr> 
</tbody> 
</table>

以下是從螢火蟲採取佈局信息：

Margin = 0 0 0 0 (West North East South) 
Border = 0 0 0 0 
Padding = 14 7 14 7 
Size: 111 * 29 

box-sizing:content-box 
position:static 
Z:auto

以下是本輸出;應Ñ

在上面的圖片，所述細胞是相當大則在規範要求。

如何刪除單元格文本和單元格邊框之間的所有填充以便它們粘在一起？

來源

2015-07-28 fatherazrael

如果你設置'TD {填充：0像素}會發生什麼'？ – TheUknown

沒有任何反應。當給予表 – fatherazrael

但是，當我寫。然後文本來到左邊界，但整個單元格不會變小。 – fatherazrael

嘗試使用NOWRAP屬性

Read more here

而且here

來源

2015-07-28 07:00:21

它不適合我 – fatherazrael

它聽起來像是有一些其他的CSS影響代碼。添加！重要的是，避免其他CSS，如下所示：td {padding：0px！important} –

總是嘗試並避免使用'！important'而不是使用'id'指定表並將CSS應用到ID – TheUknown

這裏，提取CSS從pure-min.js您使用。只添加id爲你的表和CSS覆蓋你需要td

有例子爲兩個表（先用id爲表修改，第二不修改）

#myTable td {padding-top:0; padding-bottom:0;} 
 
/*there You can set everything what You need for table td's, or just set padding:0 */ 
 

 
.pure-table{border-collapse:collapse;border-spacing:0;empty-cells:show;border:1px solid #cbcbcb} 
 
.pure-table caption{color:#000;font:italic 85%/1 arial,sans-serif;padding:1em 0;text-align:center} 
 
.pure-table td,.pure-table th{border-left:1px solid #cbcbcb;border-width:0 0 0 1px;font-size:inherit;margin:0;overflow:visible;padding:.5em 1em}

<table class="pure-table fullWidth" id="myTable"> 
 
<tbody> 
 
    <tr class="pure-table-odd"> 
 
    <td> 
 
    <label class="boldText">Bank</label> 
 
    </td> 
 
    <td> 
 
    <label class="boldText">Japha Bank</label> 
 
    </td> 
 
    </tr> 
 
</tbody> 
 
</table> 
 

 
<br><br> 
 

 
<table class="pure-table fullWidth"> 
 
<tbody> 
 
    <tr class="pure-table-odd"> 
 
    <td> 
 
    <label class="boldText">Bank</label> 
 
    </td> 
 
    <td> 
 
    <label class="boldText">Japha Bank</label> 
 
    </td> 
 
    </tr> 
 
</tbody> 
 
</table>

更新：（基於用戶評論我們不假設在CSS中使用ID來應用它 ...我nsted id有新.myTable）：

.myTable td {padding-top:0px !important; padding-bottom:0px !important;} 
 
/*there You can set everything what You need for table td's, or just set padding:0 */ 
 

 
.pure-table{border-collapse:collapse;border-spacing:0;empty-cells:show;border:1px solid #cbcbcb} 
 
.pure-table caption{color:#000;font:italic 85%/1 arial,sans-serif;padding:1em 0;text-align:center} 
 
.pure-table td,.pure-table th{border-left:1px solid #cbcbcb;border-width:0 0 0 1px;font-size:inherit;margin:0;overflow:visible;padding:.5em 1em}

<table class="pure-table fullWidth myTable"> 
 
<tbody> 
 
    <tr class="pure-table-odd"> 
 
    <td> 
 
    <label class="boldText">Bank</label> 
 
    </td> 
 
    <td> 
 
    <label class="boldText">Japha Bank</label> 
 
    </td> 
 
    </tr> 
 
</tbody> 
 
</table> 
 

 
<br><br> 
 

 
<table class="pure-table fullWidth"> 
 
<tbody> 
 
    <tr class="pure-table-odd"> 
 
    <td> 
 
    <label class="boldText">Bank</label> 
 
    </td> 
 
    <td> 
 
    <label class="boldText">Japha Bank</label> 
 
    </td> 
 
    </tr> 
 
</tbody> 
 
</table>

來源

2015-07-28 07:18:44 nelek

剛剛看到了項目按照其標準，我們不會假設在CSS中使用ID來應用它。我們可以使用Class on Table並應用於該類別的每個td – fatherazrael

更新您的問題並提及。因爲別人。有很多使用id的建議。 – nelek

@fatherazrael回答更新。 – nelek

如何填充表格中每個單元格的填充？

回答

相關問題