How to create table/data grid for mobile devices using HTML/CSS/JavaScript

Question

I want to show a table/data grid as shown below, this is for mobile devices like iPhone and Andriod phones. Are there any examples for this? (using plain HTML/CSS/JavaScript)

enter image description here

Accept an answer if it resolved your question. :) – Gurpartap Singh Jul 07 '11 at 22:41 — Gurpartap Singh, Jul 07 '11 at 22:41

score 1 · Answer 1 · answered May 12 '11 at 18:37

If you have the HTML, CSS, etc. ready and working, you can use UIWebView class on iOS/iPhone to view your HTML file.

NSString *htmlString = @"<html>.......</html>";
NSURL *baseURL = [NSURL URLWithString:@""];

[myWebView loadHTMLString:htmlString baseURL:baseURL];

score 0 · Answer 2 · edited May 23 '17 at 12:01

0

Basic example: Display HTML Table in webview

edited May 23 '17 at 12:01

Community

1
1

answered May 12 '11 at 18:34

Priyank

10,273
2
25
24

score 0 · Answer 3 · answered May 14 '11 at 00:36

I had to do something like this when developing using jQTouch. I simply created an Edge-to-edge list with one item, and place a table inside it:

<ul class="edgetoedge">
    <li>
        <table sytle="width:100%; text-align: center; padding: 5px">
            <tr><td>Row 1-1</td><td>Row 1-2</td><td>Row 1-3</td></tr>
            <tr><td>Row 2-1</td><td>Row 2-2</td><td>Row 2-3</td></tr>
        </table>
    </li>
</ul>

Then style the table (i.e. <table>, <tr>, and <td>) to your heart's content.

How to create table/data grid for mobile devices using HTML/CSS/JavaScript

3 Answers3