hacking HTML cells with CSS

Question

Hi,

I have a html table that has 2 cells in a row. How can i make the second cell appear below the first one instead of next to it? I can only do it in css and it's a dirty hack, but ... i still need it.

Answer 1

change the display to block tr td{ display:block; }

Answer 2

With out affecting the whole table it's not possible.

You can set the display of the table cells to block:

#your-table-id, #your-table-id tr, #your-table-id td {
  display: block;
}

You could try this with only the row you want, but those cell will most likely be renders after the rest of the table.

Edit: Actually it dies work with just a row: http://jsfiddle.net/JzkLZ/

Caveat: This won't work in IE6.

Answer 3

CSS:

table{
    width: 100px;
}
.block{
    border: 1px solid black;
    display: block;
    width: 100px
}

HTML:

<table>
    <tr>
        <td class="block">
            First Cell
        </td>
        <td class="block">
            Second Cell
        </td>
    </tr>
</table>

Try it: http://jsfiddle.net/LKFC5/1/

If possible you should try to edit the HTML instead of hacking it with CSS :)

Answer 4

Add these to the cell style to make it work in IE:

float:left;
clear:both;

Answer 5

How your code look like?

I would rather use jQuery not CSS