CODEWITHSUNDEEP
cssmobile
Jimmy
Jimmy

Reputation: 13

Problems displaying a table on mobile version of my site

I've been trying to fix this issue for 10 days now and still i couldn't find any solution.

I have a table that shows perfectly on desktop version but on mobile it gets out of the page area, i tried also @media screen max width 600px to modify the size of the table and overflow hidden but still not working, i will paste the code below:

<style type="text/css">
    table {
        border-collapse: collapse;
        width: 100%;
    }

    td {
        border: 1px solid #d3d3d3;
        text-align: center;
        white-space: nowrap;
    }

    th {
        background-color: #0288D1;
        border: 2px solid #d3d3d3;
        text-align: center;
        font-size: large;
        color: white;
        text-transform: uppercase;
    }
</style>

<table>
    <thead>
        <tr>
            <th colspan="4" style="background-color:#0277BD"><strong>Some Text Here<strong></th></tr>
<tr>
<th><strong>Some Text Here</strong></th>
            <th><strong>Some Text Here</strong></th>
            <th><strong>Some Text Here</strong></th>
            <th></th>
        </tr>
    </thead>
    <tbody>

        <tr>
            <td>
                <a rel="nofollow" target="_blank" href="https://somesite.com/play"><img width="200" height="80" src="https://somesite.com/image.png" alt="Some Text Here"></a>
            </td>

            <td><strong><font color="green">Some Text Here</font></strong></td>
            <td>Some Text Here</td>

            <td>
                <div>
                    <button class="playblock" style="display:block;width:150px;height:50px;background-color:#4CAF50;margin-bottom:5px;color:white;font-size:20px;cursor:pointer;text-align:center;" onmouseover="this.style.backgroundColor='green'" onMouseOut="this.style.backgroundColor='#4CAF50'" onclick="window.location.href = 'https://somesitehere.com/play';">PLAY</button>
                </div>

                <div>
                    <button class="reviewblock" style="display:block;width:150px;height:50px;background-color:#EB9C12;color:white;font-size:20px;cursor:pointer;text-align:center;" onmouseover="this.style.backgroundColor='orange'" onMouseOut="this.style.backgroundColor='#EB9C12'" onclick="window.location.href = 'https://somesitehere.com/see/';">REVIEW</button>
                </div>
            </td>
        </tr>

Upvotes: 0

Views: 7254

Answers (4)

Jimmy
Jimmy

Reputation: 13

Thanks for all your feedback.

I fixed it myself after some testing using:

@media only screen and (max-width: 800px) { ... }

Upvotes: -1

GifCo
GifCo

Reputation: 1373

You have to decide what it should look like on mobile. The simple fix is to set a min-width on the table but this might make things to small on mobile. You should also be using a media query to make the buttons smaller, they are very large.

table { min-width: 500px; }

Upvotes: 1

Qaisar Feroz
Qaisar Feroz

Reputation: 197

Add a container element with overflow-x:auto around the <table>, for example:

<div style="overflow-x:auto;">
     <table>
         ...
     </table>
</div>

This table will display a horizontal scroll bar if the screen is too small to display the full content.

Upvotes: 0

dylanjameswagner
dylanjameswagner

Reputation: 552

This is a common problem with tables on mobile. It is not clear if you are using the table for layout or if you will have more rows of data with Play and Review links.

  1. If you are using it for layout, I would suggest exploring a flexbox layout instead.
  2. If you are planning to have more rows in the table you could wrap the table in a <div> with max-width: 100%; overflow: auto; that would allow the div/table to horizontally scroll but not otherwise affect the layout of the page. Pair this with reduced font-size on smaller screens and, IMO, you get a pretty usable table on mobile.
  3. There are a few methods for modifying how a table is rendered on small screens by using a data attribute (like data-title) on the <td> and <th> that duplicate the column heading so that on small screens you can pull the data attribute using a ::before pseudo element like td::before { content: attr(data-title); } and tell your table elements to all be display: block; and styling them kinda like each row is it's own table.
    Here is an example from CSS Tricks: https://css-tricks.com/responsive-data-tables/

Upvotes: 2

Related Questions