Question

我有一个有两行的表。第二行由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"会对该单元格起作用。

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

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

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

如何包装长HTML表格单元格

3 个答案: