如何使表格单元的行为类似于UL LI？

Question

I have a page of generated HTML which I cannot edit. The page has a table which contains two rows and each row has 4 cells each. I want to force the cells to behave like unordered list items so that they display in a vertical list. I know this is horrible hacking, but it really is my only choice at the moment. Is there a way to get table cells to display vertically rather than horizontally?

Answer 1

You have to change display property for cells.

Assume the class of your table is mytable, CSS code would be:

.mytable td {
    display: block;
}

Check out this fiddle: http://jsfiddle.net/8Loy6x24/1/

I wouldn't recommend this hack, though.

Answer 2

Try like this..

td {
    display: block;
}

DEMO