代码之家  ›  专栏  ›  技术社区  ›  DavidDunham

HTML TR用于宽度,但隐藏

html-table css
  •  0
  • DavidDunham  · 技术社区  · 8 年前

    我有一个普通的html table (没有花哨的东西): https://jsfiddle.net/ljo9gkud/

    ->表使用第一个 作为列大小定义,如so:。 

    <tr class=“cdef”>
<td width=“40%”>lt;/td>
<td width=“10%”>lt;/td>
<td width=“10%”>lt;/td>
<td width=“10%”>lt;/td>
<td width=“10%”>lt;/td>
<td width=“20%”>lt;/td>
</tr>

    目标:我想先隐藏这一点,因为它会造成不必要的间隙。“css display:none;”does not work because then the column size definitions are ignored:

    


    使用display:none->https://jsfiddle.net/ljo9gkud/1(忽略的宽度)
    


    问题:
    


    即使在设置height:0etc.on both<tr>and<td>i cannot get rid of the space(gap)it creates.有什么帮助吗?如何不显示第一个<tr>but keep column size definition from it?
    


    ->表格使用第一个<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 & GT;因为这会造成不必要的差距。"CSS display: none;"不起作用,因为随后将忽略列大小定义:
enter image description here
    


    带显示器:无->https://jsfiddle.net/Ljo9gkud/1(忽略宽度)
    


    问题:
    


    即使设置height: 0两个都有<TR & GT;和<td>我无法摆脱它造成的空间(缺口)。有什么帮助吗?我怎么不展示第一个呢<TR & GT;但要保留列大小定义吗?
    2 回复  |  直到 8 年前
        1
  •  3
  •   Rence    8 年前 

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


    .Cdef td {
    padding: 0;
}

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

        2
  •  1
  •   mplungjan    8 年前 

    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>
    推荐文章
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号