具有列宽限制的表格布局答案

【问题标题】：Table layout with column width restrictions具有列宽限制的表格布局
【发布时间】：2019-06-07 17:41:57
【问题描述】：

我有一个包含 3 列的 HTML 表格的问题。限制：

第 1 列：固定宽度，不换行（小文本）
第 2 列：可以使用更长的文本换行
第 3 列：描述性长文本，换行
一行应该跨越页面的整个宽度（由于背景颜色）
第 3 列的最小宽度应为 70%
第 2 列应占用尽可能多的空间，但要考虑第 3 列的限制（因此，或多或少应该是最大 30%）。

以下代码给出的结果看起来不错：

<!DOCTYPE html>
<html>
<body>

<table >
  <tr style="background-color:red;color:blue;">
    <td style="width:100px;">Jill</td>
    <td>Smith</td>
    <td style="min-width:70%;width:100%;">50</td>
  </tr>
  <tr >
    <td style="width:100px;">Eve</td>
    <td>Jackson</td>
    <td style="min-width:70%;width:100%;">94</td>
  </tr>
  <tr>
    <td style="width:100px;">John</td>
    <td >Doe</td>
    <td style="min-width:70%;width:100%;">80</td>
  </tr>
</table>

</body>
</html>

但是当用更长的文本替换第二行第二列（即杰克逊）中的文本时，例如

Sed ut perspiciatis, unde omnis iste natus error sit voluptatem 刺槐，

它看起来不再好，第二列很小，我看不出有什么办法让它变宽。

【问题讨论】：

在downvoter，是什么原因？

标签： html css html-table

【解决方案1】：

将width:100%添加到第三列使min-width:70%无效，而是使整个表格全宽，变化如下：

    <!DOCTYPE html>
    <html>
    <body>

    <table style="width:100%">
      <tr style="background-color:red;color:blue;">
        <td style="width:100px;">Jill</td>
        <td>Smith</td>
        <td style="min-width:70%;">50</td>
      </tr>
      <tr >
        <td style="width:100px;">Eve</td>
        <td>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,</td>
        <td style="min-width:70%;">94</td>
      </tr>
      <tr>
        <td style="width:100px;">John</td>
        <td >Doe</td>
        <td style="min-width:70%;">80</td>
      </tr>
    </table>

    </body>
    </html>

【讨论】：

感谢您的回答，但是当我现在更改“sed ...”示例时是可以的，但是当仅将整个“Sed ..”替换为例如“杰克逊”这个词第二列保持在这个宽度与“空白，实际上我希望这种情况下第二列更小（只是“杰克逊”这个词的宽度）。
那纯css和table布局恐怕达不到预期的效果。使用 css 网格应该是可行的 - 您是否需要支持较旧的浏览器，或者 css 网格是一个可行的选择？
什么是“旧”浏览器？实际上，该代码是为 doxygen 设计的。我对“css网格”一无所知，所以我很感兴趣。（同时我也会查看一些关于 CSS 网格的文档）。
对于任何功能的浏览器支持，我强烈推荐caniuse.com。当我通过“旧”浏览器访问css grid 时，我的意思是 IE
我很清楚在 doxygen 中它只适用于 HTML（我知道一些内部结构 ;-)），它只适用于某些 HTML 页面。我认为目前对浏览器版本的限制暂时有点严格。

【解决方案2】：

这个答案可能是一个非首发，但你不一定需要为这种事情使用表格。

如果我制作这个页面，我会跳过表格，从 Mathew Taylor 的 Three Column Liquid Layout 开始......然后交换第二列和第三列。

【讨论】：