HTML tr для ширины, но скрыть

Question

У меня есть нормальный HTML table (ничего необычного): https://jsfiddle.net/Ljo9gkud/

-> Таблица использует первые <tr> для определения размера столбца, например:

<tr class="Cdef">
    <td width="40%">&nbsp;</td>
    <td width="10%">&nbsp;</td>
    <td width="10%">&nbsp;</td>
    <td width="10%">&nbsp;</td>
    <td width="10%">&nbsp;</td>
    <td width="20%">&nbsp;</td>
</tr>

Цель: сначала я хочу скрыть <tr>, потому что это создает ненужный пробел. "CSS display: none;" не работает, потому что тогда определения размера столбца игнорируются:

С дисплеем: нет -> https://jsfiddle.net/Ljo9gkud/1 (ширина игнорируется)

Проблема:

Даже при настройке height: 0 и т. Д. На <tr> и <td> я не могу избавиться от создаваемого пространства (промежутка). Любая помощь? Как мне не показать первое <tr>, но сохранить от него определение размера столбца?

Answer 1

Вы также можете поместить интервал в заголовок таблицы - я поместил последний интервал в первую строку ячейки

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%">&nbsp;</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>

Answer 2

Удалите свои пробелы из вашего первого 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;
}

https://jsfiddle.net/Ljo9gkud/9/