问用于宽度但隐藏的HTML tr
EN

Stack Overflow用户

提问于 2018-07-04 15:24:42

回答 2查看 42关注 0票数 0

我有一个普通的超文本标记语言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;"不起作用，因为这样会忽略列大小定义：

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

问题：

即使在<tr>和<td>上都设置了height: 0等，我也不能摆脱它创建的空间(间隙)。有什么帮助吗？如何不显示第一个<tr>，但保留其中的列大小定义？

css

html-table

回答 2

Stack Overflow用户

回答已采纳

发布于 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;
}

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

票数 3

Stack Overflow用户

发布于 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%">&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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51168033

复制

相似问题

问用于宽度但隐藏的HTML tr
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用于宽度但隐藏的HTML trEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用于宽度但隐藏的HTML tr
EN