Question

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…

Answer 1

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!