Joe Joe - 3 years ago 154
CSS Question

What's stopping this HTML table from being completely responsive?

I've created a table for a schedule and while it resizes within the browser, when I try to visit via a mobile, it doesn't manage to fully resize.
It looks like this on a phone when I scroll horizontally:
enter image description here
On my phone it cuts off half of Thursday.
I've tried everything that I can think of.
I'm not the most experienced coder and so my code may be a little untidy.
Can anyone spot why this isn't working? Or is there something I can do to tweak it a little?

Any help is greatly appreciated.
Cheers.



body {
font-family: proxima nova;
}

th,
td {
text-align: center;
border-collapse: collapse;
outline: 1px solid #e3e3e3;
}

td {
padding: 1% 2%;
}

th {
background: #44A499;
color: white;
padding: 1% 2%;
}

td:hover {
cursor: pointer;
background: #44A499;
color: white;
}

<table width="100%" align="center">
<div id="head_nav">
<tr>
<th>Time</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Thrusday</th>
</tr>
</div>

<tr>
<th>16:15 - 17:45 </th>

<td>
<!--<div class="content"><span class="hidden"></span>-->Gentle Yoga at the Dragon Theater, Barmouth. </td>
<td>Gentle Yoga at Calon Lan Yoga Studio, Penrhyndeudraeth.</td>
<td title="No Class" class="Holiday"></td>


</div>
</tr>

<tr>
<th>18:00 - 19:45</td>

<td>Dynamic Yoga at the Dragon Theater, Barmouth.</td>
<td>Dynamic Yoga at Calon Lan Yoga Studio, Penrhyndeudraeth.</td>
<td>Ashtanga Flow Yoga at Calon Lan Yoga Studio, Penrhyndeudraeth.</td>


</div>
</tr>


</div>
</tr>
</table>




Answer Source

There are a few errors in the code. I eliminated the divs in the table, plus there were a few errors (a <th> tag closed with a </td> tag and some closing tr tags repeated). It all worked to me. I suggest, in order to make the table more readable, to follow w3schools' suggestion to add a container element - in the example is a <div> - with a overflow-x:auto, in order to display a horizontal scrollbar if the screen is too small to display the full content.

Here's w3schools link to the page "How TO - Responsive Tables": https://www.w3schools.com/howto/howto_css_table_responsive.asp

Here's the code without <div> and with the <th> tag corrected, tested on Safari on an iPhone 5s:

<head>
<title>Yoga Classes</title>
<style type="text/css">
    body {
        font-family: proxima nova;
    }
    th,td {
        text-align: center;
        border-collapse: collapse;
        outline: 1px solid #e3e3e3;
    }
    td {
        padding: 1% 2%;
    }
    th {
        background: #44A499;
        color: white;
        padding: 1% 2%;
    }
    td:hover {
        cursor: pointer;
        background: #44A499;
        color: white;
    }
    </style>
</head>
<body>
<table width="100%" align="center" >
    <tr>
        <th>Time</th>
        <th>Monday</th>
        <th>Tuesday</th>
        <th>Thrusday</th>
    </tr>
    <tr>
        <th>16:15 - 17:45 </th>
        <td><!--<div class="content"><span class="hidden"></span>-->Gentle Yoga at the Dragon Theater, Barmouth. </td>
        <td>Gentle Yoga at Calon Lan Yoga Studio, Penrhyndeudraeth.</td>
        <td title="No Class" class="Holiday"></td>
    </tr>
    <tr>
        <th>18:00 - 19:45</th>
        <td>Dynamic Yoga at the Dragon Theater, Barmouth.</td>
        <td>Dynamic Yoga at Calon Lan Yoga Studio, Penrhyndeudraeth.</td>
        <td>Ashtanga Flow Yoga at Calon Lan Yoga Studio, Penrhyndeudraeth.</td>
    </tr>
</table>
</body>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download