html 如何删除动态填充表中的行之间的边距？

klr1opcd 于 2023-09-28 发布在其他

关注(0)|答案(1)|浏览(109)

我希望在第二个示例中的行之间没有边距。所有行都应具有与示例1相同的边距。请注意，我是动态填充这些表的，所以我不知道有多少行被填充了。

.marker-img-column {
  background-color: #ffffff;
  text-align: center;
  margin: 0;
  padding: 0 0 0 1em;
  width: 20em;
}

.marker-img {
  max-height: 300px;
  max-width: 400px;
  width: 275px;
  height: auto;
  margin: 0;
  padding: 0;
}

<html>
<h2>Everything is filled in</h2>
<table>
  <tr>
    <td colspan="3">
      Name1
    </td>
  </tr>
  <tr>
    <td>Materials Used:</td>
    <td>
      product 1, product 2, product 3
    </td>
    <td rowspan="10" class="marker-img-column"><img class="marker-img" src="https://fastly.picsum.photos/id/11/2500/1667.jpg?hmac=xxjFJtAPgshYkysU_aqx2sZir-kIOjNR9vx0te7GycQ" alt="Image marker name" /></td>
  </tr>
  <tr>
    <td>
      Compartment:
    </td>
    <td>
      Building
    </td>
  </tr>
  <tr>
    <td>Fire rating:</td>
    <td>
      EI120
    </td>
  </tr>
  <tr>
    <td>Compartment type:</td>
    <td>
      Wall
    </td>
  </tr>
  <tr>
    <td>Materials:</td>
    <td>
      Material 1, Material 2, Material 3
    </td>
  </tr>
  <tr>
    <td>Penetration size (W x H):</td>
    <td>
      40 x 50
    </td>
  </tr>
  <tr>
    <td>Pipe type / size:</td>
    <td>
      type / 50 mm
    </td>
  </tr>
  <tr>
    <td>Wall tickness:</td>
    <td>
      55 mm
    </td>
  </tr>
  <tr>
    <td>Installation date:</td>
    <td>
      21/09/2023
    </td>
  </tr>
  <tr>
    <td>Comments:</td>
    <td>
      comment 1, comment 2, comment 3
    </td>
  </tr>
</table>

<h2>Some values are filled in</h2>

<table>
  <tr>
    <td colspan="3">
      Name1
    </td>
  </tr>
  <tr>
    <td>Materials Used:</td>
    <td>
      product 1, product 2, product 3
    </td>
    <td rowspan="10" class="marker-img-column"><img class="marker-img" src="https://fastly.picsum.photos/id/11/2500/1667.jpg?hmac=xxjFJtAPgshYkysU_aqx2sZir-kIOjNR9vx0te7GycQ" alt="Image marker name" /></td>
  </tr>
  <tr>
    <td>
      Compartment:
    </td>
    <td>
      Building
    </td>
  </tr>
  <tr>
    <td>Installation date:</td>
    <td>
      21/09/2023
    </td>
  </tr>
</table>

</html>

还有一个CodePen文档：https://codepen.io/SDG6/pen/JjwMOyZ

Html

来源：https://stackoverflow.com/questions/77148952/how-to-remove-margin-between-rows-in-a-dynamically-populated-table

1条答案

按热度按时间

5gfr0r5j1#

在第二个示例中，左侧的表格行按比例增长，以填充右侧图像指定的最小高度。
这里有一个替代方案，用css-grid替换表：

.grid {
  width: 700px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1em 8px;
}
.grid .heading {
  grid-area: 1 / 1 / 2 / 3;
}
.grid .image img {
  max-height: 300px;
  max-width: 400px;
  width: 275px;
  height: auto;
}
.grid .description {
  grid-area: 2 / 1 / 3 / 2
}
.grid .description {
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: flex-start;
  gap: 0.25em 1ch;
}

<h2>Everything is filled in</h2>
<div class="grid">
  <div class="heading">Name1</div>
  <div class="image">
    <img class="marker-img" src="https://fastly.picsum.photos/id/11/2500/1667.jpg?hmac=xxjFJtAPgshYkysU_aqx2sZir-kIOjNR9vx0te7GycQ" alt="Image marker name" />
  </div>
  <div class="description">
    <span>Materials Used:</span>
    <span>product 1, product 2, product 3</span>
    <span>Compartment:</span>
    <span>Building</span>
    <span>Fire rating:</span>
    <span>EI120</span>
    <span>Compartment type:</span>
    <span>Wall</span>
    <span>Materials:</span>
    <span>Material 1, Material 2, Material 3</span>
    <span>Penetration size (W x H):</span>
    <span>40 x 50</span>
    <span>Pipe type / size:</span>
    <span>type / 50 mm</span>
    <span>Wall tickness:</span>
    <span>55 mm</span>
    <span>Installation date:</span>
    <span>21/09/2023</span>
    <span>Comments:</span>
    <span>comment 1, comment 2, comment 3</span>
  </div>
</div>

<h2>Some values are filled in</h2>

<div class="grid">
  <div class="heading">Name1</div>
  <div class="image">
    <img class="marker-img" src="https://fastly.picsum.photos/id/11/2500/1667.jpg?hmac=xxjFJtAPgshYkysU_aqx2sZir-kIOjNR9vx0te7GycQ" alt="Image marker name" />
  </div>
  <div class="description">
    <span>Materials Used:</span>
    <span>product 1, product 2, product 3</span>
    <span>Compartment:</span>
    <span>Building</span>
    <span>Installation date:</span>
    <span>21/09/2023</span>
  </div>
</div>

赞(0）回复(0）举报 2023-09-28

我来回答

html 如何删除动态填充表中的行之间的边距？

1条答案

相关问题

热门标签

最新问答