代码之家 › 专栏 › 技术社区 › albert

具有列宽限制的表布局

html-table css html

-1

albert · 技术社区 · 6 年前

限制:

第1列:固定宽度,不换行(小文本)
第3列:描述性长文本,换行
一行应该横跨页面的整个宽度(由于背景颜色)
第3列的最小宽度应为70%

以下代码给出了一个看起来正常的结果:

<!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)时,例如。

在任何情况下,你都应该明白这一点苦参,

它看起来不好了,第二列是小的,我认为没有办法使它更广泛。

1 回复 | 直到 6 年前

Piotr Wicijowski 6 年前

添加 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>

user1005939 4 年前

这个答案可能是不可能的,但是您不一定需要使用表来处理这类事情。

Three Column Liquid Layout 作者:马修·泰勒。。。。然后交换第二列和第三列。

推荐文章

Mona Jalal · 在HTML中使用PHP显示表的内容

2 年前

free · 基于特定默认列对表进行排序

2 年前

CRaw · 表格中的标题文本对齐:前2个单元格左对齐,后3个单元格右对齐

2 年前

Bryan Santos · 固定表头与引导

2 年前

Muhammad Moosa Zubairy · 在div之后得到不需要的逗号

2 年前

buckshot · 使用CSS隐藏gridview中的某些列

2 年前

SeniorFluffie · 完整动态HTML表悬停事件不工作

6 年前

Smithy · 如何将此文本置于电子邮件模板中表格行的中心

6 年前

user7158897 · 如何基于地图区域单击显示/隐藏不同的表内容

6 年前

user9727941 · 不知道如何在空白td中插入这些数据

6 年前