html - 如何动态填充列中的空白区域

Question

我有一个包含三列的表格。第 1 列的内容是动态的。这是一天的时间表，所以每天文本的长度都会发生变化。第 2 列也是动态的，但不会像一个月几次那样频繁更改。第 3 列是静态的，我手动更改信息。

问题是每天其中一列可能有空白空间。在任何给定的一天，第 1 列可能比其他两列更长或更短。我想做的是动态填充空白区域，无论哪一列需要它，以便所有三列看起来都有些平衡。

每列中的文本都有一个 div 包装器。我的想法是每列末尾的另一个 div 可以填充文本或图像，并会根据表格的整体高度自动缩小或增大。

我已经搜索了不同的 HTML/CSS 属性，但还没有找到解决方案。也许我问的太多了，但希望有人做过类似的事情。大多数新闻网站似乎甚至在版 block 内也能做到这一点。他们的专栏看起来很平衡。

我不知道这将如何在服务器端工作，因为它需要知道最终高度，但如果你确实有这样的解决方案，我会使用 VB，如果是客户端，也会使用 Javascript。但我认为会有一种 CSS 方式。

编辑:我指的只是列的高度，列宽是固定的。在谷歌上搜索我所能得到的也是宽度的解决方案，所以也许我要求的东西不能或没有完成。我指的是填满列高度的文本量。为简单起见，假设第 1 列是唯一发生变化的列。但是，填充第 1 列 HEIGHT 的文本量可能多于或少于填充其他两列的文本量，如果文本较少，则在第 1 列中留下空白区域，如果有，则在其他两列中留下空白区域比其他两个都多的文本。希望一切都解决了:)

Answer 1

您没有指定要填充其余列的内容，因此我假设它们可以只是随机图像。
在这种情况下，解决方案是为每个 td 分配一个背景图像，并为 div 提供纯色背景。这样，表格的高度就是它的自然高度(最大文本的高度)，不需要额外的技巧。

body {background:#FFE}
table {
  border: 1px outset gray
}
td {
  border: 1px inset gray;
  width: 33.3%;
  vertical-align: top;
  padding: 0;
}
td:first-child {
  background: url(http://lorempixel.com/600/900) repeat;
}
td:first-child + td {
  background: url(http://lorempixel.com/600/901) repeat;
}
td:first-child + td + td {
  background: url(http://lorempixel.com/600/902) repeat;
}
td > div {
  background: #FFE;
  padding: .33em
}

<table>
  <tr>
    <td>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </div>
    </td>
    <td>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </div>
    </td>
    <td>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      </div>
    </td>
  </tr>
</table>