CODEWITHSUNDEEP
htmlcssmobile
user2157850
user2157850

Reputation:

Mobile Friendly Alternative to Tables?

I'm learning HTML/CSS and I want to rewrite the site listed below (currently made with Windows Excel) to something custom written by me. The problem is that working with tables is kind of tough going mobile friendly. I haven't gotten' into Javascript yet (soon) but is there a CSS way to take care of this?

Site I want to change: http://libertyresourcedirectory.com/d/home.html

For this site: http://eglove.github.io/ I use @media screen only max-width 1024px and 728px to give an automatic "tablet" and "mobile" version. Doing it with the LRD site would not break up the tables properly.

Thanks in advance for any answers! :)

Upvotes: 2

Views: 4275

Answers (1)

jtorrescr
jtorrescr

Reputation: 627

You could do something like this: http://jsfiddle.net/sGJW5/1/ HTML

<div class="container">
    <ul>
       <li>
           Computers
        </li>
        <li>
            <a href="">Editing</a>
        </li>
        <li>
            <a href="">Internet/Privacy </a>
        </li>
    </ul>
</div>
<div class="container">
    <ul>
       <li>
           Computers
        </li>
        <li>
            <a href="">Editing</a>
        </li>
        <li>
            <a href="">Internet/Privacy </a>
        </li>
    </ul>
</div>

CSS

.container
{
    display:inline-block;
}

.container ul
{
    list-style:none;
}

.container ul li:first-child
{
    background-color:red;
}

Upvotes: 1

Related Questions