CODEWITHSUNDEEP
htmlcsshtml-table
marrie
marrie

Reputation: 33

How do I get a table with 3 columns and the third colums only has 1<td> 100%

<html>
<body>
<table align="left" border="0" cellpadding="1" cellspacing="1" style="width: 1000px;">
    <tbody>
        <tr>
            <td width="300">Hanrathsingel 14</td>
            <td width="300"><a href="cmsPage1_Home">Home</a></td>
            <td width="400" height="100%">This one has to take the full height of the table</td>
        </tr>
        <tr>
            <td width="300">1252 AE Laren</td>
            <td width="300"><a href="cmsPage2_Wie-zijn-wij">Wie zijn wij</a></td>

        </tr>
        <tr>
            <td width="300">T. 035-6231419</td>
            <td width="300"><a href="cmsPage3_Informatie">Informatie</a></td>

        </tr>
        <tr>
            <td width="300">M. 06-21700357</td>
            <td width="300"><a href="cmsPage9_Algemene-voorwaarden">Algemene Voorwaarden</a></td>

        </tr>
        <tr>
            <td width="300"><a href="mailto:[email protected]">[email protected]</a></td>
            <td width="300"><a href="cmsPage4_Contact">Contact</a></td>

        </tr>
    </tbody>
</table>
</body>
</html>

How do I get the column to be 100% of the table height but the other columns must keep their height?

Because I want to put a widget in there but I have to work in my boss his cms and I am not allowed to make new divs :(

Upvotes: 0

Views: 85

Answers (2)

Pete
Pete

Reputation: 58442

Try rowspan:

<table align="left" border="0" cellpadding="1" cellspacing="1" style="width: 1000px;">
    <tbody>
        <tr>
            <td width="300">Hanrathsingel 14</td>
            <td width="300"><a href="cmsPage1_Home">Home</a></td>
            <td width="400" rowspan="5">This one has to take the full height of the table</td>
        </tr>
        <tr>
            <td width="300">1252 AE Laren</td>
            <td width="300"><a href="cmsPage2_Wie-zijn-wij">Wie zijn wij</a></td>

        </tr>
        <tr>
            <td width="300">T. 035-6231419</td>
            <td width="300"><a href="cmsPage3_Informatie">Informatie</a></td>

        </tr>
        <tr>
            <td width="300">M. 06-21700357</td>
            <td width="300"><a href="cmsPage9_Algemene-voorwaarden">Algemene Voorwaarden</a></td>

        </tr>
        <tr>
            <td width="300"><a href="mailto:[email protected]">[email protected]</a></td>
            <td width="300"><a href="cmsPage4_Contact">Contact</a></td>

        </tr>
    </tbody>
</table>

Example

Upvotes: 2

Kevin Cittadini
Kevin Cittadini

Reputation: 1469

JSFiddle Example

Use rowspan="5" in that TD.

Rowspan attribute, tells your element to "get the height" of 5 rows in this case.

If you have dinamic content remember to update this value to the actual number of rows of your table.

Upvotes: 1

Related Questions