Question

我有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>

但是当将第二行第二列（即Jackson）中的文本替换为较长的文本时，例如

Sed ut perspiciatis，unde omnis iste natus error sit voluptatem lor虫多洛美克球菌，

它看起来不太好了，第二列很小，我看不出有什么方法可以扩大它。

Answer 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>

Answer 2

这个答案可能不是一个入门者，但是您不一定需要使用表来进行此类操作。

如果要创建此页面，我将跳过表格，以Mathew Taylor ...的Three Column Liquid Layout开始，然后交换第二和第三列。

具有列宽限制的表布局

2 个答案: