CODEWITHSUNDEEP
htmlcssxhtml
iceteea
iceteea

Reputation: 1224

Different td widths in different rows in tables?

Quick-Question: how can this be achieved? (see image below)

crazytable

Setting td width booth in plain html and with css had no effect.

The td width CAN vary but only with the same width for each row.

Upvotes: 16

Views: 39565

Answers (5)

Piotr Maślanka
Piotr Maślanka

Reputation: 70

It's actually possible without this sub-tabling. I'm having this as a bug in my layout now. Just try playing around with paddings and margins inside cells :(

"Bug" works consistently across multiple browsers.

Edit: Hunted that one.

td { display: block; }

Don't do it at home.

Upvotes: 2

Sonal Khunt
Sonal Khunt

Reputation: 1894

take 1 main table with 3 tr and in each tr take another sub table with 3 column than apply css

Upvotes: 2

James Hill
James Hill

Reputation: 61793

It's a lot to look at, but you need a parent table with three rows where each row contains another table with three columns:

<table>
    <tr>
        <td>
            <table>
                <tr>
                    <!-- Set Width of Individual Cells Here -->
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>
            <table>
                <tr>
                    <!-- Set Width of Individual Cells Here -->
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>
            <table>
                <tr>
                    <!-- Set Width of Individual Cells Here -->
                    <td>
                    </td>
                    <td>
                    </td>
                    <td>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Here's a working jsFiddle to illustrate.

Upvotes: 6

dash
dash

Reputation: 91482

I don't believe it can in one table easily.

Instead, you have to use the colspan attribute to overlap cells on different rows.

For example, use 6 columns, the first row will have colspan = 2 , td, colspan = 2

The second row will have td, td colspan=2, td and so on.

It's quite messy - you might want to consider displaying your data in a different way, for example, using DIVs

Upvotes: 6

Chris Fulstow
Chris Fulstow

Reputation: 41872

Use three separate <table> blocks, each with a single row having three columns of varying widths.

Upvotes: 22

Related Questions