How to collaspe padding of each cell in table?

Question

Pure CSS is used in HTML Code; When table is generated by default cells have much spacing in them.

Following is HTML for the same:

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

Following is layout information taken from 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

Following is present output; which should n

In above Image, the cells are quite large then required in specification.

How to remove all padding between cell text and cell border so that they stick together?

Answer 1

Here, extracted css from pure-min.js which You use. Only add id for Your table and in css override what You need for td

There is example for two tables (first modified with id for table, second not modified)

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

UPDATE : (based on user comment we are not suppose to use ID's in CSS for applying it ... insted id there is new .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>

Answer 2

Try to use the nowrap Attribute

Read more here

And here