顶部和底部有 td 内容的表格答案

【问题标题】：table with td content at top and bottom顶部和底部有 td 内容的表格
【发布时间】：2020-06-16 01:49:20
【问题描述】：

在（基于引导的）HTML 页面中，我有一个表格。

在表格单元格中，我想要一些顶部对齐的内容，以及同一单元格中的一些底部对齐的其他内容（通常有足够的垂直空间）。如何实现？我想避免的是使用固定的像素间距。

MWE 来了：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.0/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"></script>


<div class="container">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <table class="table table-striped table-dark">
                    <thead>
                    <tr>
                        <th scope="col">H1</th>
                        <th scope="col">H2</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>
                            <div style="height: 100px; background-color: yellow"></div>
                        </td>
                        <td>
                            <div>top - aligned</div>
                            <div>
                                <button type="button" class="btn btn-primary btn-sm">Bottom-right</button>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

【问题讨论】：

如果您使用表格，那么您可以添加一列。但是到目前为止，您尝试了什么失败了？
我尝试采用一些 flexbox 示例，但这些示例在表格上下文中不起作用（例如 stackoverflow.com/questions/585945/…）。
如果你想让你的 td 变成一个弹性盒子，同时也和它的兄弟一起拉伸，tr 也需要一个弹性盒子。

标签： css layout html-table bootstrap-4

【解决方案1】：

请看看这个。你想要这样的东西吗？

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.0/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"></script>


<div class="container">
  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        <table class="table table-striped table-dark">
          <thead>
            <tr>
              <th scope="col">H1</th>
              <th scope="col">H2</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <div style="height: 100px; background-color: yellow"></div>
              </td>
              <td>
                <div class="">top - aligned</div>
                <div class="mt-5">
                  <button type="button" class="btn btn-primary btn-sm">Bottom-right</button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

在这里，我为按钮添加了顶部边距。 class="mt-5"

【讨论】：

间距现在是硬编码的，但想法是中间的空间是“灵活的”，即它在需要时增长，从最小尺寸为零开始。

【解决方案2】：

您可以添加一列

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.0/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"></script>

<div class="container">
  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        <table class="table table-striped table-dark">
          <thead>
            <tr>
              <th scope="col">H1</th>
              <th scope="col" colspan="2">H2</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <div style="height: 100px; background-color: yellow" />
              </td>
              <td>
                <div>top - aligned</div>
              </td>
              <td class="align-bottom text-right">
                <div>
                  <button type="button" class="btn btn-primary btn-sm">Bottom-right</button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

或使用绝对位置

.bottom-right {
  bottom: 0;
  right: 0;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.0/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"></script>

<div class="container">
  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        <table class="table table-striped table-dark">
          <thead>
            <tr>
              <th scope="col">H1</th>
              <th scope="col">H2</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <div style="height: 100px; background-color: yellow" />
              </td>
              <td class="position-relative">
                <div>top - aligned</div>
                <div>
                  <button type="button" class="btn btn-primary btn-sm position-absolute bottom-right m-1">Bottom-right</button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

如果只是视觉布局问题，请重新考虑没有表格的结构，可能的示例：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container ">
  <div class="container-fluid ">
    <div class="row table-dark table-striped">
      <div class="col-sm-6 p-0 border-bottom border-secondary">
        <h2 class="px-3 border-bottom border-secondary">title 1</h2>
        <div style="height: 100px;" class="m-3 bg-warning text-dark">100px</div>
      </div>
      <div class="col-sm-6  d-flex flex-column p-0 border-bottom border-secondary">
        <h2 class="pr-3 border-bottom border-secondary m-0">title 2</h2>
        <div class="pr-3">top - aligned</div>
        <div class="text-right mt-auto p-3">
          <div>
            <button type="button" class="btn btn-primary btn-sm">Bottom-right</button>
          </div>
        </div>
      </div>
      <div class="col-sm-6 p-0 border-bottom border-secondary">
        <div style="height: 150px;" class="m-3 bg-info ">150px</div>
      </div>
      <div class="col-sm-6 p-3 d-flex flex-column p-0 border-bottom border-secondary">

        <div class="pr-3">top - aligned</div>
        <div class="text-right mt-auto">
          <div>
            <button type="button" class="btn btn-primary btn-sm">Bottom-right</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：

不是这个意思，两部分应该在同一个TD，不能并排。
@user52366 然后使用位置选项，如果两者都不是您想要的，请用您尝试过的和不想使用的来澄清问题。最后，可能不得不做出妥协。一个糟糕的问题会给出糟糕的答案（如果没有的话）。
我想在 same 表格单元格的顶部放置一些内容，在底部放置一些其他内容，中间有空白区域，其高度为表格行增长。不是很清楚吗？
@user52366 很清楚，但这是一个表格单元格，而不是弹性或网格元素。表格单元格中的垂直对齐只需要一个值，并且一次用于所有内容。如果没有一个提议是好的。今天，另一个选项是将显示重置为 trs 和 tds，以便它可以成为 flex 或网格布局，而不是表格布局。这对我来说是一个多余的问题，你得到了多余的工作答案。此外，如果这是用于设计布局目的的表格，您应该删除它并使用 display:flex 或 display:grid。

【解决方案3】：

对于<table> 有一个解决方案仍然会很好，但我采纳了@G-Cyrillus 的建议并使用引导类来实现这一点。如果有更好的解决方案，请发帖，我很乐意接受。

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css"/>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
        <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.0/dist/umd/popper.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"></script>
        <title>Test</title>
    </head>
    <body>        
        <div class="container">
            <div class="container-fluid" >
                <div class="row">
                    <div class="col-6" style="background-color: grey">
                        <img src="x" height=100 />
                    </div>
                    <div class="col-6" style="background-color: yellow">
                        <div class="h-100 d-flex flex-column">
                            <div class="row">
                                content at top
                            </div>
                            <div class="row align-items-end justify-content-end flex-grow-1" style="background-color: orange">
                                <button type="button" class="btn btn-primary btn-sm">Bottom-right</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>           
</html>

【讨论】：