HTML：无法使 table 单元格中的 URL 符合我的要求

Question

我试图在 Firefox Jetpack SDK 插件面板的 table 单元格中显示 URL。我试图主要实现 2 种不同的布局，但都没有用。我在 SO 上使用了各种线程来尝试找到解决方案，但我想保持这个干净（没有 JS 技巧或外部库），不想指定确切的大小，这些线程的一半答案让我感到困惑或没有工作，因为我的情况略有不同。 CSS 本身也让我感到困惑，因为它是多么不直观，所以不用说我的尝试可能几乎是有效的。 Jetpack 面板在调整大小方面似乎也有奇怪的行为方式，因此增加了复杂性。

面板内容

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th class="status">Status</th>
                <th class="message">Message</th>
                <th class="url">URL</th>
            </tr>
        </thead>
        <tbody id="entries">
        </tbody>
    </table>
</body>
</html>

添加一个 td 行

const table = document.getElementById("entries");
function entry(data) {
let tr = document.createElement("tr");
for (let i in data) {
    if (data.hasOwnProperty(i)) {
        let td = document.createElement("td");
        if (i == "url") {
            let a = document.createElement("a");
            a.href = data[i];
            a.textContent = data[i];
            a.addEventListener("click", function(event) {
                event.preventDefault();
                event.stopPropagation();
            });
            td.appendChild(a);
        } else {
            td.textContent = data[i];
        }
        td.setAttribute("class", i);
        tr.appendChild(td);
    }
}
table.appendChild(tr);
}

TL:DR 为状态和消息添加一个 td，并在最终的 td 中使用锚标记来显示 url。

已尝试CSS

table {
width: 100%;
max-width: 100%;
}
td.url a {
width: 100%;
max-width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
}

期望的结果

我不想看到水平滚动条出现！面板本身应该是自动调整大小的（通过 Firefox），以适合用户设备的未知大小显示其中的 table。 table 应填满面板的宽度，但不会超过它并导致水平溢出。

url 应该显示在一行中，当它达到 td 的最大宽度时用省略号截断（这是隐含的，来自 table 的最大大小减去显示其他 tds 的最小宽度）。

我不想指定确切的宽度或任何类似的东西，以保留响应式设计和用户首选项，例如默认字体和字体大小。

TL:DR 我想要实现的是具有自然大小的 table，2 列自然显示，1 列在超过隐式剩余大小时被截断。

当前结果：http://i.imgur.com/xnephA0.png（table 的最大尺寸发生了什么？）

之前的一次尝试，当我想让 url 正好显示在 2 行纯文本中时，用省略号截断：http://i.imgur.com/tUOTrKu.png（没错，它做到了 没什么)

感谢任何能帮助我找到解决方案的人，我个人开始淹没在对我来说不再有意义的 CSS 陈述中。

现在是 2015 年了，CSS 仍然非常笨拙，如果不花费数小时时间处理通常看起来不相关的事情（例如职位声明），我们仍然无法实现这样的基本废话？如果基本演示仍然像在 Haskell 中编写延迟加载的数据库一样复杂，CSS 如何实现其作为演示技术的目的？ http://img.pandawhale.com/post-18529-Peter-Griffin-blinds-CSS-gif-I-lEO1.gif

Answer 1

根据其他帖子的更多修补和信息花絮的结果，文本溢出仅在

时有效

元素显示：块
元素的宽度为 px

所以除非我已经离开 insane/retarded，这几乎意味着没有使用 CSS 来使页面既可展示又可响应，因为显然一半的基本展示技巧仍然需要废话，比如以 px 为单位设置宽度，取消响应。

有人和我一起签署这份请愿书，让起草 CSS 规范的人被解雇吗？第三次迭代，它仍然完全没有兑现它的承诺。

HTML：无法使 table 单元格中的 URL 符合我的要求

HTML: Can't make URL in table cell fit the way I want

html

css

firefox-addon-sdk