16

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.

Ozair Kafray
  • 13,351
  • 8
  • 59
  • 84
iceteea
  • 1,214
  • 3
  • 20
  • 35
  • 10
    Obligatory comment: If you need this sort of layout, it's probably not data that needs to be in a table, but should rather use div's. – Doozer Blake Dec 01 '11 at 12:40
  • What's the purpose of this? Table is for tabular data, and I imagine it'd be hard to read tabular data in a table that looks like that. Might I suggest you look into some other elements? ``s, maybe? – peirix Dec 01 '11 at 12:41
  • Needed for styling a very big form. – iceteea Dec 01 '11 at 13:48
  • Here is the answer http://stackoverflow.com/questions/5938099/html-table-cell-width-for-different-rows – Ari Nov 16 '14 at 17:47

5 Answers5

22

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

Chris Fulstow
  • 41,170
  • 10
  • 86
  • 110
6

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

dash
  • 89,546
  • 4
  • 51
  • 71
  • Using divs was my first thought but i need this table for styling a giant form, using divs would be even as messy as using the monstreus code above. – iceteea Dec 01 '11 at 12:46
6

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.

James Hill
  • 60,353
  • 20
  • 145
  • 161
2

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.

Piotr Maślanka
  • 62
  • 7
  • 3
    This answer could use some serious clarification. are you saying that display:block solved your problem? What does hunted that one mean? More clear, less clever please. – Ryan Ore Sep 07 '12 at 02:13
2

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

Sonal Khunt
  • 1,876
  • 12
  • 20