Responsive Table cell to new line

html css html-table css-tables
user1707077 picture user1707077 · May 18, 2013 · Viewed 71.3k times · Source

There's a third party content site that I have to "EMBED" via dynamic content, I don't know Ajax or Jquery at the moment so I am wondering if its possible to shift a table cell down to a new line essentially creating a new row.

The embed ends up with: 

<table>
<tr>
<td></td>
<td></td>
</tr>
</table>

There were no classes or ID's placed in the table, however it is the only table on the page and it has way too much content to fit on one line, this is for a mobile website so I've got to make the whole page 320 pixels wide.

Is it possible using CSS alone?

I can't insert new HTML, the content is dynamically created from a secure server that we don't have access to, but we use an API key in order to access.. mediaqueries work though.

I'm currently trying to experiment with something along the lines of: 

td {clear:both;}

Answer

user2019515 picture user2019515 · May 18, 2013

You can set the td to display:block; then they'll all be under eachother.

HTML

<table>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
</table>

CSS

td{
    display:block;
}

See here: http://jsfiddle.net/hDsts/

Related questions

overflow:scroll; in <td>

Why does the CSS property overflow:scroll; not work in <td>, while overflow:hidden; works well? <table border="1" style="table-layout:fixed; width:100px"> <tr> <td style="overflow:scroll; width:50px;">10000000000000000000000000000000000</td&…

Read More
using text-align center in colgroup

i have a table in my page, i use colgroups to format all cells in this column the same way, works good for background color and all. but cannot seem to figure out why text-align center does not work. it …

Read More
Set cellpadding and cellspacing in CSS?

In an HTML table, the cellpadding and cellspacing can be set like this: <table cellspacing="1" cellpadding="1"> How can the same be accomplished using CSS?

Read More