與表格單元格

Question

內不需要填充的問題我有這樣的表格和自定義CSS代碼https://jsfiddle.net/g9a4sL6r/

在這裏你可以看到，該錶行有28px的高度，而內容只有14px的高度。我想擺脫額外的填充，所以表格行也將有14px的高度。

這裏是我的代碼需要通過計算器：

<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：inherit;

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