CODEWITHSUNDEEP
htmlhtml-tableword-wrap
aschoenebeck
aschoenebeck

Reputation: 449

How to wrap long HTML table cell

I have a table with two rows. The second row consists of a long text in a colspan="2". How can this text be wrapped so the table is not wider then the two first row cells? I can't set a fixed width for the table, because the first two cells are dynamic.

http://jsfiddle.net/qLpuq/1/

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

I wrongly assumed, that style="width: 0" would work on that cell.

Upvotes: 1

Views: 7324

Answers (3)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201846

I’m afraid there’s no direct solution. You could play with JavaScript, creating copy of the table containing only the first row, get its width, discard the copy, and use the width to set the width of your real table. Combined with the setting table-layout: fixed, this should handle the situation. You can simplify the approach so that you do not create a copy of the table but instead remove the second row, later add it back. It gets rather ugly:

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

A completely different idea is to use a workaround where the long text is not in a cell but in a caption element, placed at the bottom of the table:

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

Upvotes: 4

Tom Rudge
Tom Rudge

Reputation: 3272

Use max-width with the % of 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>

Upvotes: 0

Ahmed Habib
Ahmed Habib

Reputation: 189

It might be usefull for you.. 

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

Update after question update

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

Upvotes: 0

Related Questions