table 单元格内不需要的填充问题

Question

中有此 table 和自定义 CSS 代码

如您所见，table 行的高度为 28px，而内容的高度仅为 14px。我想去掉额外的填充，所以 table 行的高度也将是 14px。

这是 Whosebug 需要的我的代码：

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

Answer 1

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

Answer 2

只需将此添加到您的 css

white-space:继承;

td.sidehoved {
    padding: 0px;
    white-space: inherit;
}

table 单元格内不需要的填充问题

Problems with unwanted padding inside table cell

html

css

html-table

cellpadding