CODEWITHSUNDEEP
htmlcsslayout
oliverbj
oliverbj

Reputation: 6062

Fit table on iPhone css

I am currently designing a website for both web and iPhone. I am running into a problem, showing tables on the iPhone.

On my computer, the table looks normal. I can see everything. But on my iPhone, I can only see two rows, the other two rows are not visible, since they go beyond the screen. (There are no scrollbars)

How can I do, so the table will fit into the screen width? This is the css:

I am using @media in the css.

This is the .css for the table:

  .blacklist{
        width:100%;
    }

.blacklist thead th{
    border:1px solid #e2e2e2;
    width:25%;    
}
.blacklist thead th img{
    width:72px;
    height:72px;
    float:left;
}
.blacklist thead .title{
    text-align:left;
    padding-top:23px;
    font-size:18px;
}
.blacklist tbody td{
    border:1px solid #e2e2e2;  
    padding:5px;  
}
.blacklist .button-holder{
        text-align:center;
        margin:7px;
}

Here is the .css for the iPhone version:

   .blacklist table{
        visibility:collapse;
    }
    .blacklist th{
        width:25%;  

    }
    .blacklist thead th img{
        display:none;
    }
    .blacklist thead th .title{
        text-align:center;
        padding:7px;
    }

I want to.. break up the table.. Like show two TH's and then two TD's. Below that, two more TH's and two more TD's. And so on...

Upvotes: 1

Views: 6465

Answers (3)

felippe
felippe

Reputation: 490

The best that worked for me is, beside decrasing font-size, is enabling the horizontal scroll for the table. Example bellow:

HTML:

<div class="wrap">
    <table>
    ...
    </table>
</div>

CSS:

div.wrap { width: 100%; overflow-x: auto; }

Upvotes: 1

Luca
Luca

Reputation: 9735

Have a look at Responsive Data Table Roundup. There is no perfect solution in here but you can find inspiration to solve the issue you are having.

Also, why developing for iPhone only when it comes to mobile? there are million of other devices out there that deserve love too!

Upvotes: 2

Harry Thomas
Harry Thomas

Reputation: 25

Put the separate tables into divs and float the divs left. That will position the tables horizontally next to eachother.

Upvotes: 0

Related Questions