控制表格列宽答案

【问题标题】：Controlling table column widths控制表格列宽
【发布时间】：2023-03-18 01:21:01
【问题描述】：

这看起来是一项简单的任务，但结果却很难。

一行两列的表格。表格宽度应为 100%。

第 1 列：可能包含长文本。应仅显示在一行上，溢出的文本应被剪裁。该列的宽度为整个表格的宽度减去第2列的宽度。

第 2 列：右栏的宽度应使文本完全适合。文本应右对齐。

换句话说：第 2 列的文本定义了两列的宽度。

第 1 列和第 2 列的文本是动态的，因此绝对宽度不起作用。整个表格的宽度应为浏览器窗口的宽度，这必须适用于所有现代浏览器，包括移动浏览器。

我尝试过使用表格并且我尝试过仅使用 div。这两种方法看起来都有希望，但我还没有完全解决。

这是我尝试过的一些示例代码：（问题：当浏览器变窄时，表格的宽度会超过 100%）。

<table>
    <tr>
        <td class ="td1">
        This is a table. This is a very long text. Does it get clipped?
        </td>
        <td class ="td2">
            SHOW THIS
        </td>
    </tr>
</table>

一些与之配套的 CSS：

    table {
        width: 100%;
    }
    .td1 {
        width: auto;
        overflow: hidden;
        white-space: nowrap;
    }
    .td2 {
        white-space: nowrap;
        overflow: visible;
        text-align: right;
    }

尝试使用div：（问题：第 2 列被丢弃在第 1 列下方）

<div class="div1">

    <div class="div2">
        This is a very long text in a div tag. Does it get clipped?
    </div>
    <div class="div3">
        SHOW THIS
    </div>
</div>

一些与之配套的 CSS：

    .div1 {
        display: inline-block;
        width: 100%;
    }
    .div2 {
        width: auto;
        overflow: hidden;
        white-space: nowrap;
        display: inline-block;
    }
    .div3 {
        display: inline-block;
        white-space: nowrap;
        float: right;
    }

这对我来说似乎是个难题。谁能找到好的解决方案？

更新：

这是整个 html 文件，因此任何人都可以更轻松地尝试一下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>

<style>
    .div1 {
        display: inline-block;
        width: 100%;
    }
    .div2 {
        width: auto;
        overflow: hidden;
        white-space: nowrap;
        display: inline-block;
    }
    .div3 {
        display: inline-block;
        white-space: nowrap;
        float: right;
    }

    table {
        width: 100%;
    }
    .td1 {
        width: auto;
        overflow: hidden;
        white-space: nowrap;
    }
    .td2 {
        white-space: nowrap;
        overflow: visible;
        text-align: right;
    }
</style>

</head>
<body>

<div class="div1">

    <div class="div2">
        This is a very long text. Does it get clipped?
    </div>
    <div class="div3">
        SHOW THIS
    </div>
</div>
<br/><br/><br/>
<table>
    <tr>
        <td class ="td1">
        This is a table. This is a very long text. Does it get clipped?
        </td>
        <td class ="td2">
            SHOW THIS
        </td>
    </tr>
</table>

</body>
</html>

【问题讨论】：

标签： css html html-table

【解决方案1】：

这是一个选项吗？

<div style="position:relative;white-space:nowrap;overflow:hidden;">This is a table. This is a very long text. Does it get clipped?
    <div style="position:absolute;right:0;top:0;background:white;padding-left:5px;">SHOW THIS</div>
</div>

【讨论】：

【解决方案2】：

使用 div 布局：

FIDDLE

标记：

<div class="div3">
    SHOW THIS
</div>
<div class="div2">
    This is a very long text. Does it get clipped?
</div>

CSS

.div2 {
    overflow: hidden;
    white-space: nowrap;
}
.div3
{
    float:right;
}

【讨论】：