Search code examples
htmlcsshtml-tablecellpadding

Problems with unwanted padding inside table cell


I have this table and custom CSS code here in https://jsfiddle.net/g9a4sL6r/

As you can see, the table row have 28px height, while the content only has 14px height. I want to get rid of the additional padding, so the table row will also have height 14px.

Here is my code as needed by stackoverflow:

<table class="table1" style="width:100%;" border="1px;" cellspacing="0" cellpadding="0">
  <tbody>
    <tr class="sidehoved">
      <td class="sidehoved">
        <strong>BIG 13033 - Ø4 AARhus</strong>
      </td>
      <td class="sidehoved" align="right">
        <strong>Dok. nr.&nbsp;</strong><strong>K01_C08_XXX</strong>
      </td>
    </tr>
    <tr class="sidehoved">
      <td class="sidehoved">
        Bygningsdelsjournal
      </td>
      <td class="sidehoved" align="right">
        Dato:&nbsp;2016-10-24
      </td>
    </tr>
    <tr>
      <td class="sidehoved">
      </td>
      <td class="sidehoved" align="right">
        Rev.dato: -
      </td>
    </tr>
    <tr class="sidehoved">
      <td class="sidehoved">
        <em>X = revideret siden sidste udsendelse</em>
      </td>
      <td class="sidehoved" align="right">
        Side: <span class="page"></span>/<span class="topage"></span>
      </td>
    </tr>
  </tbody>
</table>

CSS

body {
  margin: 0;
  padding: 0;
  border: 0;
  display: table;
  width: 100%;
}
table.journal-table {
  font-family: Verdana;
  font-size: 9pt;
  margin: 0px /* remove space around unordered lists */;
}

table.journal-table table, th, td
{
  border:none;
  outline:none;
  margin: 0px /* remove space around unordered lists */;
  white-space: pre-line;
  vertical-align: top;
}

/* Make white + gray stripes */

table.journal-table tr:nth-child(even){background: #FFF}
table.journal-table tr:nth-child(odd) {background: #e9e9e9}

ul {
  font-size: 9pt;
  padding: 0px /* remove indents on undordered liste */;
  margin: 0px /* remove space around unordered lists */;
  list-style-type: none;
}

/* set size of heading font + background color = medium gray */
table.journal-table th {
  border-bottom: 1px solid black /* Show line below head */;
  border-top: 1px solid black /* Show line above head */;
  border-collapse: collapse /* Show solidlines in head */;
  font-size: 8pt;
  text-align: left;
  background: #FFF;
}

/* Sidehoved og sidefod opsætning */
p {
  font-weight: normal;
  font-size: 9pt;
  font-family: Verdana;
}

 /* opsætning af tabel i sidehoved og sidefod */
table.table1 {
  font-weight: normal;
  font-size: 9pt;
}
.table1 td:nth-child(1) {width: 70%;}
.table1 td:nth-child(2) {width: 30%;}
.table1 td:nth-child(3) {width: 2%;}
.table1 td:nth-child(4) {width: 27;}

td.sidehoved {
  padding: 0px;
}

tr.sidehoved {
  padding: 0px;
}

/* Indsæt som class="sidefod" for at opsætte sidefod seperat */
p.sidefod {
  font-weight: normal;
  font-size: 8pt;
}

Solution

  • Remove white-space: pre-line

    body {
      margin: 0;
      padding: 0;
      border: 0;
      display: table;
      width: 100%;
    }
    table.journal-table {
      font-family: Verdana;
      font-size: 9pt;
      margin: 0px /* remove space around unordered lists */;
    }
    
    table.journal-table table, th, td
    {
      border:none;
      outline:none;
      margin: 0px /* remove space around unordered lists */;
      vertical-align: top;
    }
    
    /* Make white + gray stripes */
    
    table.journal-table tr:nth-child(even){background: #FFF}
    table.journal-table tr:nth-child(odd) {background: #e9e9e9}
    
    ul {
      font-size: 9pt;
      padding: 0px /* remove indents on undordered liste */;
      margin: 0px /* remove space around unordered lists */;
      list-style-type: none;
    }
    
    /* set size of heading font + background color = medium gray */
    table.journal-table th {
      border-bottom: 1px solid black /* Show line below head */;
      border-top: 1px solid black /* Show line above head */;
      border-collapse: collapse /* Show solidlines in head */;
      font-size: 8pt;
      text-align: left;
      background: #FFF;
    }
    
    /* Sidehoved og sidefod opsætning */
    p {
      font-weight: normal;
      font-size: 9pt;
      font-family: Verdana;
    }
    
     /* opsætning af tabel i sidehoved og sidefod */
    table.table1 {
      font-weight: normal;
      font-size: 9pt;
    }
    .table1 td:nth-child(1) {width: 70%;}
    .table1 td:nth-child(2) {width: 30%;}
    .table1 td:nth-child(3) {width: 2%;}
    .table1 td:nth-child(4) {width: 27;}
    
    td.sidehoved {
      padding: 0px;
    }
    
    tr.sidehoved {
      padding: 0px;
    }
    
    /* Indsæt som class="sidefod" for at opsætte sidefod seperat */
    p.sidefod {
      font-weight: normal;
      font-size: 8pt;
    }
    <table class="table1" style="width:100%;" border="1px;" cellspacing="0" cellpadding="0">
      <tbody>
        <tr class="sidehoved">
          <td class="sidehoved">
            <strong>BIG 13033 - Ø4 AARhus</strong>
          </td>
          <td class="sidehoved" align="right">
            <strong>Dok. nr.&nbsp;</strong><strong>K01_C08_XXX</strong>
          </td>
        </tr>
        <tr class="sidehoved">
          <td class="sidehoved">
            Bygningsdelsjournal
          </td>
          <td class="sidehoved" align="right">
            Dato:&nbsp;2016-10-24
          </td>
        </tr>
        <tr>
          <td class="sidehoved">
          </td>
          <td class="sidehoved" align="right">
            Rev.dato: -
          </td>
        </tr>
        <tr class="sidehoved">
          <td class="sidehoved">
            <em>X = revideret siden sidste udsendelse</em>
          </td>
          <td class="sidehoved" align="right">
            Side: <span class="page"></span>/<span class="topage"></span>
          </td>
        </tr>
      </tbody>
    </table>