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

Question

纯HTML在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>

以下是从firebug获取的布局信息：

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

此处，从您使用的pure-min.js中提取css。 只为您的表添加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来应用 ... insted id有新的{{ 1}}）：

.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}

Answer 2

尝试使用nowrap属性

Read more here

here