我有一个普通的超文本标记语言table
(没有花哨的东西):https://jsfiddle.net/Ljo9gkud/
->表使用列大小定义的第一个<tr>
,如下所示:
<tr class="Cdef">
<td width="40%"> </td>
<td width="10%"> </td>
<td width="10%"> </td>
<td width="10%"> </td>
<td width="10%"> </td>
<td width="20%"> </td>
</tr>
目标:我想隐藏第一个<tr>
,因为它创建了一个不必要的间隙。"CSS display: none;"
不起作用,因为这样会忽略列大小定义:
使用display: none -> https://jsfiddle.net/Ljo9gkud/1 (忽略宽度)
问题:
即使在<tr>
和<td>
上都设置了height: 0
等,我也不能摆脱它创建的空间(间隙)。有什么帮助吗?如何不显示第一个<tr>
,但保留其中的列大小定义?
发布于 2018-07-04 15:30:12
从你的第一个tr中删除你的空间:
<tr class="Cdef">
<td width="40%"></td>
<td width="10%"></td>
<td width="10%"></td>
<td width="10%"></td>
<td width="10%"></td>
<td width="20%"></td>
</tr>
将此代码添加到您的css中(而不是显示无):
.Cdef td {
padding: 0;
}
发布于 2018-07-04 15:36:06
您还可以将间距放在表头上-我将最后一个间距放在第一个单元格行上
body {
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size: 12px;
margin-left: 1%;
margin-right: 1%;
margin-bottom: 50px;
}
body table {
border-collapse: collapse;
border-spacing: 0;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size: inherit;
}
html .k-radio:disabled+.k-radio-label,
html .k-checkbox:disabled+.k-checkbox-label {
color: #000000 !important;
}
html .k-radio:disabled+.k-radio-label {
height: 16px;
}
html .k-checkbox:checked:disabled+.k-checkbox-label:active:before,
html .k-checkbox:checked:disabled+.k-checkbox-label:before,
html .k-checkbox:checked:disabled+.k-checkbox-label:hover:before,
html .k-checkbox:disabled+.k-checkbox-label:before {
background-color: #fff;
border-color: #ccc;
color: #000;
font-weight: bold;
}
html .k-checkbox:checked+.k-checkbox-label::before {
content: "✓";
}
html .k-radio:disabled:checked+.k-radio-label::after {
background-color: #333333;
opacity: 1
}
html input.k-textbox,
html textarea.k-textbox {
color: #000;
/* font-style: italic; */
}
/*
Style from .jsp
*/
section#matrix {
font-size: 12px;
}
.clientHeader,
.clientHeader * {
font-size: 100%;
}
.HTitle {
line-height: 80px;
font-size: 116%;
text-align: center;
font-weight: bold;
height: 80px;
position: relative;
}
.HTitle .logoprint {
height: 80px;
max-width: 120px;
position: absolute;
right: 0;
top: 0;
}
.clientHeader .matrix table {
border-spacing: 0;
border-collapse: collapse;
}
.clientHeader .matrix td {
padding: 5px 5px;
border: #C9CAD4 thin solid;
}
.clientHeader .matrix td i {
font-size: 92%;
}
.legalText {
text-align: justify;
}
/* Form Style */
.div3 {
width: 100%;
white-space: nowrap;
}
.div3>div {
width: 33.333333%;
display: inline-block;
}
td {
padding: 10px 5px;
border: #C9CAD4 thin solid;
}
.div3 {
text-align: center;
}
.div3>div:nth-of-type(1),
.div3>div:nth-of-type(2) {
border-right: #C9CAD4 thin solid;
}
.matrix2 tr td:nth-of-type(2),
.matrix2 tr td:nth-of-type(3),
.matrix2 tr td:nth-of-type(4),
.matrix2 tr td:nth-of-type(5) {
text-align: center;
}
.h1 {
font-size: 150%;
font-weight: bold;
}
.h2 {
font-size: 130%;
font-weight: bold;
}
.h3 {
font-size: 120%;
font-weight: bold;
}
.h4 {
font-size: 110%;
font-weight: bold;
}
.footer {
padding: 20px 0;
width: 100%;
text-align: center;
}
.berater>div {
padding: 5px 5px;
border: #C9CAD4 thin solid;
width: 40%;
}
.berater>div:first-of-type {
border-bottom: none;
}
textarea.k-textbox {
width: 100%;
}
.singleQComment>.fcontainer {
display: flex;
justify-content: space-between;
}
.singleQComment>div {
/* width: 100%;
width: calc(100% - 10px); */
padding: 5px 5px;
border-top: #C9CAD4 thin solid;
border-right: #C9CAD4 thin solid;
border-bottom: none;
border-left: #C9CAD4 thin solid;
}
.singleQComment>div:last-of-type {
border-bottom: #C9CAD4 thin solid;
}
.singleQComment>div label:last-of-type {
margin-right: 0;
}
.singleQComment>div label {
margin-right: 10px;
}
#matrix>* {
margin-top: 20px;
}
.signature>span {
display: block;
margin-bottom: 20px;
}
.signature .signElements,
.signature .signElements2 {
display: flex;
justify-content: space-between;
}
.signature .signElements>div {
background-color: #dde4ff;
}
.signature .signElements>div,
.signature .signElements2>div {
height: 80px;
flex-basis: 48%;
}
<div class="matrix matrix2 num1">
<table width="100%">
<tbody>
<tr class="Cdef">
<th width="40%"> </th>
<th width="10%">keine</th>
<th width="10%">bis 2'000 €</th>
<th width="10%">2'001 bis 5'000 €</th>
<th width="40%" colspan="2">über 5'000 € (Betrag in €)</th>
</tr>
<tr>
<td>Nichtselbständige Tätigkeit (Lohn / Gehalt)</td>
<td>
<input type="radio" name="RegNicht" id="RegNicht1" class="k-radio" disabled="disabled" checked="checked">
<label class="k-radio-label" for="RegNicht1"></label>
</td>
<td>
<input type="radio" name="RegNicht" id="RegNicht2" class="k-radio" disabled="disabled">
<label class="k-radio-label" for="RegNicht2"></label>
</td>
<td>
<input type="radio" name="RegNicht" id="RegNicht3" class="k-radio" disabled="disabled">
<label class="k-radio-label" for="RegNicht3"></label>
</td>
<td width="10%">
<input type="radio" name="RegNicht" id="RegNicht4" class="k-radio" disabled="disabled">
<label class="k-radio-label" for="RegNicht4"></label>
</td>
<td>
<input type="text" class="k-textbox k-state-disabled" value="" placeholder="" disabled="disabled">
</td>
</tr>
<tr>
<td>Selbständige Tätigkeit / Gewerbebetrieb / Freiberufler</td>
<td>
<input type="radio" name="RegSelb" id="RegSelb1" class="k-radio" disabled="disabled">
<label class="k-radio-label" for="RegSelb1"></label>
</td>
<td>
<input type="radio" name="RegSelb" id="RegSelb2" class="k-radio" disabled="disabled" checked="checked">
<label class="k-radio-label" for="RegSelb2"></label>
</td>
<td>
<input type="radio" name="RegSelb" id="RegSelb3" class="k-radio" disabled="disabled">
<label class="k-radio-label" for="RegSelb3"></label>
</td>
<td>
<input type="radio" name="RegSelb" id="RegSelb4" class="k-radio" disabled="disabled">
<label class="k-radio-label" for="RegSelb4"></label>
</td>
<td>
<input type="text" class="k-textbox k-state-disabled" value="" placeholder="" disabled="disabled">
</td>
</tr>
<tr>
<td>Rente / Pension</td>
<td>
<input type="radio" name="RegRent" id="RegRent1" class="k-radio" disabled="disabled">
<label class="k-radio-label" for="RegRent1"></label>
</td>
<td>
<input type="radio" name="RegRent" id="RegRent2" class="k-radio" disabled="disabled">
<label class="k-radio-label" for="RegRent2"></label>
</td>
<td>
<input type="radio" name="RegRent" id="RegRent3" class="k-radio" disabled="disabled" checked="checked">
<label class="k-radio-label" for="RegRent3"></label>
</td>
<td>
<input type="radio" name="RegRent" id="RegRent4" class="k-radio" disabled="disabled">
<label class="k-radio-label" for="RegRent4"></label>
</td>
<td>
<input type="text" class="k-textbox k-state-disabled" value="" placeholder="" disabled="disabled">
</td>
</tr>
<tr>
<td>Vermietung / Verpachtung</td>
<td>
<input type="radio" name="RegVerm" id="RegVerm1" class="k-radio" disabled="disabled">
<label class="k-radio-label" for="RegVerm1"></label>
</td>
<td>
<input type="radio" name="RegVerm" id="RegVerm2" class="k-radio" disabled="disabled" checked="checked">
<label class="k-radio-label" for="RegVerm2"></label>
</td>
<td>
<input type="radio" name="RegVerm" id="RegVerm3" class="k-radio" disabled="disabled">
<label class="k-radio-label" for="RegVerm3"></label>
</td>
<td>
<input type="radio" name="RegVerm" id="RegVerm4" class="k-radio" disabled="disabled">
<label class="k-radio-label" for="RegVerm4"></label>
</td>
<td>
<input type="text" class="k-textbox k-state-disabled" value="" placeholder="" disabled="disabled">
</td>
</tr>
<tr>
<td>Kapitalvermögen</td>
<td>
<input type="radio" name="RegKap" id="RegKap1" class="k-radio" disabled="disabled" checked="checked">
<label class="k-radio-label" for="RegKap1"></label>
</td>
<td>
<input type="radio" name="RegKap" id="RegKap2" class="k-radio" disabled="disabled">
<label class="k-radio-label" for="RegKap2"></label>
</td>
<td>
<input type="radio" name="RegKap" id="RegKap3" class="k-radio" disabled="disabled">
<label class="k-radio-label" for="RegKap3"></label>
</td>
<td>
<input type="radio" name="RegKap" id="RegKap4" class="k-radio" disabled="disabled">
<label class="k-radio-label" for="RegKap4"></label>
</td>
<td>
<input type="text" class="k-textbox k-state-disabled" value="" placeholder="" disabled="disabled">
</td>
</tr>
<tr>
<td>Sonstige regelmäßige Einkünfte</td>
<td>
<input type="radio" name="RegSon" id="RegSon1" class="k-radio" disabled="disabled">
<label class="k-radio-label" for="RegSon1"></label>
</td>
<td>
<input type="radio" name="RegSon" id="RegSon2" class="k-radio" disabled="disabled">
<label class="k-radio-label" for="RegSon2"></label>
</td>
<td>
<input type="radio" name="RegSon" id="RegSon3" class="k-radio" disabled="disabled">
<label class="k-radio-label" for="RegSon3"></label>
</td>
<td>
<input type="radio" name="RegSon" id="RegSon4" class="k-radio" disabled="disabled" checked="checked">
<label class="k-radio-label" for="RegSon4"></label>
</td>
<td>
<input type="text" class="k-textbox" value="6'500" placeholder="" disabled="disabled">
</td>
</tr>
</tbody>
</table>
</div>
https://stackoverflow.com/questions/51168033
复制相似问题