CODEWITHSUNDEEP
javascriptjqueryhtml
Mark
Mark

Reputation: 4883

Dynamically break down table td into individual tr's

I have a table that I am trying to make mobile friendly see below:

<tbody>
<tr>
  <td>one</td>
  <td>one</td>
  <td>one</td>
</tr> 
<tr>
  <td>two</td>
  <td>two</td>
  <td>two</td>
</tr> 
</tbody>

I'm looking to create single columns of this table so it can be display better on mobile. Conceptually I'm thinking to ad an /tr after each /td excluding /td:last of types

My tables are dynamically generated, so it needs to dynamic solution, anyone have anythoughts on how to approach this?

Below is what the resulting table would ideally look like.

<tbody>
<tr><td>one</td></tr>
<tr><td>one</td></tr>
<tr><td>one</td></tr>
</tbody>
<tbody>
<tr><td>two</td></tr>
<tr><td>two</td></tr>
<tr><td>two</td></tr>
</tbody>

Upvotes: 0

Views: 400

Answers (3)

user2933315
user2933315

Reputation:

Try JS. Use getElementById. Write:
document.getElementById("dynamic").innerHTML="new code"

Upvotes: 0

Craig
Craig

Reputation: 167

If you're not displaying tabular data I find my preference is to stay away from tables and use lists/divs instead. That being said here are some examples of "Responsive Tables" that do contain tabular data:

http://css-tricks.com/responsive-data-table-roundup/

As pointed out a lot of them are css tricks.

Upvotes: 1

ellawren
ellawren

Reputation: 947

You could achieve the same look with CSS and media queries:

@media (max-width: 400px) { /* or whatever you want your mobile breakpoint to be */
    tr, td { float:left; width:100%; }
}

http://jsfiddle.net/nWPzp/

Upvotes: 4

Related Questions