html - td 内的表 100% 高度不占用外表的高度

Question

我在表 td 中有表，我正在尝试将表 td 内部高度设置为 100%，但它不起作用。我正在使用引导程序。基本上我想用 覆盖高度outer-table td，inner-table td我red为outer-table td和black设置了边框颜色inner-table td。你可以看到边框没有覆盖边框black 的高度red

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>
<style>
    .outer-table td {
        border: 1px solid red;
    }
    .inner-table td {
        height: 100%;
        border: 1px solid #000;
    }
</style>
<table class="table table-borderless outer-table">
<thead>
<tr>
  <th scope="col">ABC</th>
  <th scope="col">ABCD</th>
</tr>
</thead>
<tbody>
<tr>
  <td>
    <figure class="figure">
  <img class="figure-img img-fluid rounded" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22400%22%20height%3D%22300%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20300%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_179a5a2c649%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A20pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_179a5a2c649%22%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22148.84375%22%20y%3D%22158.8828125%22%3E400x300%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-rendered="true">
  <figcaption class="figure-caption">A caption for the above image</figcaption>
</figure>
  </td>
  <td>
    <table class="table table-borderless inner-table">
      <tbody>
        <tr>
          <td class="in">Lorem - Ipsum</td>
        </tr>
        <tr>
          <td class="out">Lorem - Ipsum</td>
        </tr>
      </tbody>
    </table>
  </td>
</tr>
</tbody>
</table>

标签： htmlcsshtml-table

Answer 1

如果您不使用表格，而是使用 div 怎么办。您可以使用 flex display 来实现您想要的。

看这个例子

HTML

<div class="parent">
  <div class="child1">
    <figure class="figure">
      <div class='title'>ABC</div>
      <img class="figure-img img-fluid rounded" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22400%22%20height%3D%22300%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20400%20300%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_179a5a2c649%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A20pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_179a5a2c649%22%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22148.84375%22%20y%3D%22158.8828125%22%3E400x300%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-rendered="true">
      <figcaption class="figure-caption">A caption for the above image</figcaption>
    </figure>
    
  </div>
  <div class="child2">
    <div class='title'>ABCD</div>
    <div class='quad'>Lorem - Ipsum</div>
    <div class='quad'>Lorem - Ipsum</div>
  </div>
</div>

CSS

.parent { 
  display: flex; 
  border:1px solid red; 
}

.child2 { 
  width: 100%;
  flex: 1; 
  padding: 0px;
  display: flex;
  flex-direction: column;
 }
 
.quad {
   flex: 1;
   border: solid 1px black;
}
 
.title {
  background-color: #CCC;
}