如何折叠表格中每个单元格的填充？答案

【问题标题】：How to collaspe padding of each cell in table?如何折叠表格中每个单元格的填充？
【发布时间】：2015-07-28 15:49:22
【问题描述】：

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

以下是来自 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

以下是当前输出；这应该是n

在上图中，单元格相当大，超出规格要求。

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

【问题讨论】：

如果你设置td {padding:0px} 会发生什么？
什么也没发生。当给表时
但是当我写。然后文本来到左边框，但整个单元格不会变小。
OK 尝试为表table{border-collapse: collapse} td{padding:0px}设置这个CSS
嗯，问题是label 和table 类的内容是什么...顺便说一句，如果你尝试<table cellpadding="0" cellspacing="0"> 仍然有问题，那么这些类的问题。

【解决方案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 有新的 .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>

【讨论】：

刚刚看到项目，根据它的标准，我们不应该在 CSS 中使用 ID 来应用它。我们可以在上面使用 Class on Table 并应用于该类的每个 td 吗
更新您的问题并提及。因为别人。有很多使用 id 的建议。

【解决方案2】：

尝试使用 nowrap 属性