如何包装长 HTML 表格单元格答案

【问题标题】：How to wrap long HTML table cell如何包装长 HTML 表格单元格
【发布时间】：2013-07-10 08:32:35
【问题描述】：

我有一个有两行的表。第二行由 colspan="2" 中的长文本组成。如何包装此文本以使表格不比两个第一行单元格宽？我无法为表格设置固定宽度，因为前两个单元格是动态的。

<table>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
    </tr>
    <tr>
        <td colspan="2" style="width: 0" >Very long cell that should just be as long as the first two cells and wrap, but not take all the screen width.</td>
    </tr>
</table>

我错误地认为style="width: 0" 会在那个单元格上工作。

【问题讨论】：

你用的是哪个版本的html？
当前浏览器中的 HTML5。

标签： html html-table word-wrap

【解决方案1】：

恐怕没有直接的解决方案。您可以使用 JavaScript，创建仅包含第一行的表格副本，获取其宽度，丢弃副本，并使用宽度来设置真实表格的宽度。结合设置table-layout: fixed，这应该可以处理这种情况。您可以简化该方法，这样您就不会创建表的副本，而是删除第二行，然后再将其添加回来。它变得相当丑陋：

<!doctype html>
<title>Hack</title>
<style>
table { table-layout: fixed }
tr:first-child td { white-space: nowrap }
</style>
<table id=tbl>
<tbody id=tbody>
    <tr>
        <td id=cell1>Cell 1</td>
        <td id=cell2>Cell 2</td>
    </tr>
    <tr id=row2><td colspan=2>
        Very long cell that should just be as long as the first two cells and
        wrap, but not take all the screen width.
</table>
<script>
var tbl = document.getElementById('tbl');
var tbody = document.getElementById('tbody');
var row2 = document.getElementById('row2');
var cell1 = document.getElementById('cell1');
var cell2 = document.getElementById('cell2');
tbody.removeChild(row2);
var width = tbl.clientWidth;
var width1 = cell1.clientWidth;
var width2 = cell2.clientWidth;
tbody.appendChild(row2);
cell1.style.width = width1 + 'px';
cell2.style.width = width2 + 'px';
tbl.style.width = width + 'px';
</script>

一个完全不同的想法是使用一种解决方法，其中长文本不在单元格中，而是在位于表格底部的caption 元素中：

<table>
    <caption align=bottom style="text-align: left">
        Very long cell that should just be as long as the first two cells and
        wrap, but not take all the screen width.
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
    </tr>
</table>

【讨论】：

哇，简单的解决方案完美运行。在这里更新小提琴：jsfiddle.net/qLpuq/2

【解决方案2】：

它可能对你有用..

 <table style="width:300px;" border="1">
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
        </tr>
        <tr>
            <td colspan="2" style="width: 70%;" >Very long cell that should just be as long as the first two cells and wrap, but not take all the screen width.</td>
        </tr>
    </table>

问题更新后更新

 <table style="width:100%;" border="1">
        <tr>
            <td style="width: 50%;">Cell 1</td>
            <td style="width: 50%;">Cell 2</td>
        </tr>
        <tr>
            <td colspan="2" style="width: 70%;" >Very long cell that should just be as long as the first two cells and wrap, but not take all the screen width.</td>
        </tr>
    </table>

【讨论】：

谢谢，但我无法为表格设置固定宽度，因为前两个单元格是动态的。更新了原始问题。
您只需将更改为低 70%

【解决方案3】：

将 max-width 与 colspan2 的百分比一起使用

                 <table style="width:100%;" border="1">
    <tr>
        <td style="width: 50%;">Cell 1</td>
        <td style="width: 50%;">Cell 2</td>
    </tr>
    <tr>
        <td colspan="2" style="max-width: ??%;" >Very long cell that should just be as long as the first two cells and wrap, but not take all the screen width.</td>
    </tr>
</table>

【讨论】：