html - 如何折叠表格中每个单元格的填充？

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>

以下是从 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

在上图中，单元格非常大，因此符合规范要求。

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

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 有新的 .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>