如何填充表格中每个单元格的填充？

Question

纯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 

以下是本输出;应Ñ

在上面的图片，所述细胞是相当大则在规范要求。

如何删除单元格文本和单元格边框之间的所有填充以便它们粘在一起？

Answer 1

尝试使用NOWRAP属性

Read more here

而且here

Answer 2

这里，提取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>