Responsive Mobile Friendly Tables
Question
I have been trying to finish the layout of one page for over a week or more now. I have the page working kinda. I need some help with the original layout as well as making it mobile friendly. Problem with original layout is that with more data going into some of the boxes these boxes get gain height and the other boxes stay small. I need them to all always be the same size box for a good looking calendar, also as I resize the page to simulate different screen sizes boxes in the calendar get really long with data in them and the text runs out of the box. I added word-wrap: break-word; to the tables and now the text looks really weird so I thought maybe I am going about this the wrong way.
A redesign for mobile would probably be best. One problem is that there is more than one table on a single page and all use the same css. I think another problem is that I am using PHP to populate some of the events in the <td> sections of the calendar table.
Let me show what I have and break it all down.
Current CSS
.m_buttons {
color: #000;
background-color:#DFDFDF;
text-decoration:none;
}
.m_buttons:hover {
color: #000;
background-color:#999999;
text-decoration: underline;
}
table {
color: #333;
font-family: Helvetica, Arial, sans-serif;
width: 100%;
border:solid;
table-layout: fixed;
}
table a:link, table a:visited, table a:active {
color: #000;
text-decoration:none;
}
td, th {
border: 1px solid;
height: 30px;
transition: all 0.3s;
word-wrap: break-word;
}
td a {
display:block;
width:100%;
}
th {
background: #DFDFDF;
font-weight: bold;
}
td {
background: #FAFAFA;
text-align: center;
width: 33%;
}
tr:nth-child(even) td { background: #F1F1F1; }
tr:nth-child(odd) td { background: #FEFEFE; }
.pricing {
border:none !important;
}
.cornernum {
height: 150px;
width: 150px;
margin-right: 5.5px;
margin-left: 5.5px;
margin-bottom: 5.5px;
margin-top: 5.5px;
position: relative;
}
.cornernum > span {
position: absolute;
top: 5px;
right: 5px;
font-weight: bold;
}
.popupinfo {
border-bottom: 1px dotted #000; color: #000; outline: none;
text-decoration: none;
position: relative;
}
.popupinfo span {
margin-left: -999em;
position: absolute;
}
.popupinfo:hover span {
border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
font-family: Calibri, Tahoma, Geneva, sans-serif;
position: absolute; left: 1em; top: 2em; z-index: 99;
margin-left: 0; width: 175px;
text-align:left;
}
.popupinfo:hover img {
border: 0;
margin: 0px;
position: relative;
padding-left: 12px;
}
.popupinfo:hover em {
font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
display: block; padding: 0.2em 0 0.6em 0;
}
* html a:hover { background: transparent; }
.classic {background: #FFFFAA; border: 1px solid #ccc; padding: 0.8em 1em; }
.link1 {color: #000; background-color:#f4eb12; text-decoration:none; word-wrap: break-word; margin-bottom:2px;}
.link1:hover {color: #000; background-color:#ffff99; text-decoration: underline; margin-bottom:2px;}
.link2 {color: #000; background-color:#f7951d; text-decoration:none; word-wrap: break-word; margin-bottom:2px;}
.link2:hover {color: #000; background-color:#ffcc99; text-decoration: underline; margin-bottom:2px;}
.link3 {color: #000; background-color:#f7951d; text-decoration:none; word-wrap: break-word; margin-bottom:2px;}
.link3:hover {color: #000; background-color:#ffcc99; text-decoration: underline; margin-bottom:2px;}
.link4 {color: #000; background-color:#00ffff; text-decoration:none; word-wrap: break-word; margin-bottom:2px;}
.link4:hover {color: #000; background-color:#99ffff; text-decoration: underline; margin-bottom:2px;}
.link5 {color: #000; background-color:#6a52a2; text-decoration:none; word-wrap: break-word; margin-bottom:2px;}
.link5:hover {color: #000; background-color:#996699; text-decoration: underline; margin-bottom:2px;}
.link6 {color: #000; background-color:#44b649; text-decoration:none; word-wrap: break-word; margin-bottom:2px;}
.link6:hover {color: #000; background-color:#99cc99; text-decoration: underline; margin-bottom:2px;}
.link7 {color: #000; background-color:#e22627; text-decoration:none; word-wrap: break-word; margin-bottom:2px;}
.link7:hover {color: #000; background-color:#cc9999; text-decoration: underline; margin-bottom:2px;}
.link8 {color: #000; background-color:#1670b8; text-decoration:none; word-wrap: break-word; margin-bottom:2px;}
.link8:hover {color: #000; background-color:#6699cc; text-decoration: underline; margin-bottom:2px;}
.link9 {color: #000; background-color:#1670b8; text-decoration:none; word-wrap: break-word; margin-bottom:2px;}
.link9:hover {color: #000; background-color:#6699cc; text-decoration: underline; margin-bottom:2px;}
.link10 {color: #000; background-color:#1670b8; text-decoration:none; word-wrap: break-word; margin-bottom:2px;}
.link10:hover {color: #000; background-color:#6699cc; text-decoration: underline; margin-bottom:2px;}
.link11 {color: #000; background-color:#00ffff; text-decoration:none; word-wrap: break-word; margin-bottom:2px;}
.link11:hover {color: #000; background-color:#99ffff; text-decoration: underline; margin-bottom:2px;}
.my-legend .legend-title {
text-align: left;
margin-bottom: 5px;
font-weight:bold;
font-size: 100%;
}
.my-legend .legend-scale ul {
margin: 0;
margin-bottom: 5px;
padding: 0;
float: left;
list-style: none;
}
.my-legend .legend-scale ul li {
font-size: 80%;
list-style: none;
margin-left: 0;
line-height: 18px;
margin-bottom: 2px;
font-weight:bold;
}
.my-legend ul.legend-labels li span {
display: block;
float: left;
height: 16px;
width: 30px;
margin-right: 5px;
margin-left: 0;
border: 1px solid #999;
}
.my-legend .legend-source {
font-size: 70%;
color: #999;
clear: both;
}
.my-legend a {
color: #777;
}
Current PHP and HTML
<?php
$array = '/feed.json?start=2020-01-01&end=2100-12-31';
$obj = json_decode(file_get_contents($array,true));
$monthNames = Array("January", "February", "March", "April", "May", "June", "July",
"August", "September", "October", "November", "December");
if (!isset($_REQUEST["month"])) $_REQUEST["month"] = date("n");
if (!isset($_REQUEST["year"])) $_REQUEST["year"] = date("Y");
$cMonth = $_REQUEST["month"];
$cYear = $_REQUEST["year"];
$prev_year = $cYear;
$next_year = $cYear;
$prev_month = $cMonth-1;
$next_month = $cMonth+1;
if ($prev_month == 0 ) {
$prev_month = 12;
$prev_year = $cYear - 1;
}
if ($next_month == 13 ) {
$next_month = 1;
$next_year = $cYear + 1;
}
?>
<table>
<tr align="center">
<td>
<table width="100%" cellspacing="0" cellpadding="0" border="1">
<tr><td width="50%" align="left"><div class="m_buttons"><a href="<?php echo "?month=". $prev_month . "&year=" . $prev_year; ?>" ><strong>Previous Month</strong></a></div></td><td width="50%" align="right"><div class="m_buttons"><a href="<?php echo "?month=". $next_month . "&year=" . $next_year; ?>" ><strong>Next Month</strong></a></div></td></tr>
</table>
</td>
</tr>
<tr>
<td align="center">
<table width="100%" cellpadding="2" cellspacing="2" border="1">
<tr align="center"><td colspan="7"><strong><?php echo $monthNames[$cMonth-1].' '.$cYear; ?></strong></td></tr>
<tr><th><strong>Sun</strong></th><th><strong>Mon</strong></th><th><strong>Tues</strong></th><th><strong>Wed</strong></th><th><strong>Thurs</strong></th><th><strong>Fri</strong></th><th><strong>Sat</strong></th></tr>
<?php
$timestamp = mktime(0,0,0,$cMonth,1,$cYear);
$maxday = date("t",$timestamp);
$thismonth = getdate ($timestamp);
$startday = $thismonth['wday'];
function getDateCellContent(array $obj, $d) {
$f_newdate = DateTime::createFromFormat('Y-m-j', $d);
$f_newdate = $f_newdate->format('m/d/Y');
$cellLink = '';
$cellSoldout = '';
foreach ($obj as $key => $value) {
$start = $value->start;
$end = $value->end;
$a_endnewdate = DateTime::createFromFormat('m/d/Y g:i A', $end);
$a_enddate = $a_endnewdate->format('m/d/Y');
$a_endtime = $a_endnewdate->format('g:i A');
$a_newdate = DateTime::createFromFormat('m/d/Y g:i A', $start);
$a_date = $a_newdate->format('m/d/Y');
$a_time = $a_newdate->format('g:i A');
$id = $value->id;
$title = $value->title;
if($a_date === $f_newdate) {
foreach ($value->alldetails as $details) {
$name = $details->name;
$title = $value->title;
$to = $details->to;
$from = $details->from;
if (!$details->soldout && $title === "Trip 1:00 PM") {
$cellLink .= nl2br("<div class='link1'><a class='popupinfo' href='/setup/".$id."' target='_blank''><strong>".$name."\r\n".$a_time."</strong><span class='classic'><img src='0290.jpg' alt='Trip' height='80' width='150'>\r\n\r\n<b>Trip</b>\r\nFrom: ".$from."\r\nTo: ".$to."\r\nDistance: 35 miles\r\nStart: ".$a_time."\r\nEnd: ".$a_endtime."\r\nDuration: 3 hours\r\nLayovers: None\r\n</span></a></div>");
}
if (!$details->soldout && $title === "Trip 10:00 AM") {
$cellLink .= nl2br("<div class='link2'><a class='popupinfo' href='/setup/".$id."' target='_blank'><strong>".$name."\r\n".$a_time."</strong><span class='classic'><img src='0290.jpg' alt='Trip' height='80' width='150'>\r\n\r\n<b>Trip</b>\r\nFrom: ".$from."\r\nTo: ".$to."\r\nDistance: 35 miles\r\nStart: ".$a_time."\r\nEnd: ".$a_endtime."\r\nDuration: 3 hours\r\nLayovers: None\r\n</span></a></div>");
}
if (!$details->soldout && $title === "Trip 2:30 PM") {
$cellLink .= nl2br("<div class='link3'><a class='popupinfo' href='/setup/".$id."' target='_blank'><strong>".$name."\r\n".$a_time."</strong><span class='classic'><img src='0290.jpg' alt='Trip' height='80' width='150'>\r\n\r\n<b>Trip</b>\r\nFrom: ".$from."\r\nTo: ".$to."\r\nDistance: 35 miles\r\nStart: ".$a_time."\r\nEnd: ".$a_endtime."\r\nDuration: 3 hours\r\nLayovers: None\r\n</span></a></div>");
}
if (!$details->soldout && $title === "Mother's Day Trip 1:00 PM") {
$cellLink .= nl2br("<div class='link4'><a class='popupinfo' href='/setup/".$id."' target='_blank'><strong>".$name."\r\n".$a_time."</strong><span class='classic'><img src='e1550770332159-300x250.jpg' alt='Mothers Day Trip' height='80' width='150'>\r\n\r\n<b>Mothers Day Trip</b>\r\nFrom: ".$from."\r\nTo: ".$to."\r\nDistance: 35 miles\r\nStart: ".$a_time."\r\nEnd: ".$a_endtime."\r\nDuration: 3 hours\r\nLayovers: None\r\n</span></a></div>");
}
if (!$details->soldout && $title === "Trip 6:00 PM") {
$cellLink .= nl2br("<div class='link5'><a class='popupinfo' href='/setup/".$id."' target='_blank'><strong>".$name."\r\n".$a_time."</strong><span class='classic'><img src='0290.jpg' alt='Trip' height='80' width='150'>\r\n\r\n<b>Trip</b>\r\nFrom: ".$from."\r\nTo: ".$to."\r\nDistance: 35 miles\r\nStart: ".$a_time."\r\nEnd: ".$a_endtime."\r\nDuration: 3 hours\r\nLayovers: None\r\n</span></a></div>");
}
if (!$details->soldout && $title === "Special 10:00 AM") {
$cellLink .= nl2br("<div class='link6'><a class='popupinfo' href='/setup/".$id."' target='_blank'><strong>".$name."\r\n".$a_time."</strong><span class='classic'><img src='DSC_2233-2T-U-2.jpg' alt='Special' height='80' width='150'>\r\n\r\n<b>Special</b>\r\nFrom: ".$from."\r\nTo: ".$to."\r\nDistance: 25 miles\r\nStart: ".$a_time."\r\nEnd: ".$a_endtime."\r\nDuration: 1.5 hours\r\nLayovers: None\r\n</span></a></div>");
}
if (!$details->soldout && $title === "Day Trip 10:00 AM") {
$cellLink .= nl2br("<div class='link7'><a class='popupinfo' href='/setup/".$id."' target='_blank'><strong>".$name."\r\n".$a_time."</strong><span class='classic'><img src='0290.jpg' alt='Day Trip' height='80' width='150'>\r\n\r\n<b>Day Trip</b>\r\nFrom: ".$from."\r\nTo: ".$to."\r\nDistance: 76 miles\r\nStart: ".$a_time."\r\nEnd: ".$a_endtime."\r\nDuration: 8 hours\r\nLayovers: Yes\r\n</span></a></div>");
}
if (!$details->soldout && $title === "Express 3:00 PM") {
$cellLink .= nl2br("<div class='link8'><a class='popupinfo' href='/setup/".$id."' target='_blank'><strong>".$name."\r\n".$a_time."</strong><span class='classic'><img src='wave_image.png' alt='Express' height='80' width='150'>\r\n\r\n<b>Express</b>\r\nFrom: ".$from."\r\nTo: ".$to."\r\nDistance: 15 miles\r\nStart: ".$a_time."\r\nEnd: ".$a_endtime."\r\nDuration: 1.25 hours\r\nLayovers: No</span></a></div>");
}
if (!$details->soldout && $title === "Express 5:00 PM") {
$cellLink .= nl2br("<div class='link9'><a class='popupinfo' href='/setup/".$id."' target='_blank'><strong>".$name."\r\n".$a_time."</strong><span class='classic'><img src='presents.jpg' alt='Express' height='80' width='150'>\r\n\r\n<b>Express</b>\r\nFrom: ".$from."\r\nTo: ".$to."\r\nDistance: 15 miles\r\nStart: ".$a_time."\r\nEnd: ".$a_endtime."\r\nDuration: 1.25 hours\r\nLayovers: No</span></a></div>");
}
if (!$details->soldout && $title === "Express 7:00 PM") {
$cellLink .= nl2br("<div class='link10'><a class='popupinfo' href='/setup/".$id."' target='_blank'><strong>".$name."\r\n".$a_time."</strong><span class='classic'><img src='boy.jpg' alt='Express' height='80' width='150'>\r\n\r\n<b>Express</b>\r\nFrom: ".$from."\r\nTo: ".$to."\r\nDistance: 15 miles\r\nStart: ".$a_time."\r\nEnd: ".$a_endtime."\r\nDuration: 1.25 hours\r\nLayovers: No</span></a></div>");
}
if (!$details->soldout && $title === "Father's Day Trip 1:00 PM") {
$cellLink .= nl2br("<div class='link11'><a class='popupinfo' href='/setup/".$id."' target='_blank'><strong>".$name."\r\n".$a_time."</strong><span class='classic'><img src='e1550770332159-300x250.jpg' alt='Fathers Day Trip' height='80' width='150'>\r\n\r\n<b>Fathers Day Trip</b>\r\nFrom: ".$from."\r\nTo: ".$to."\r\nDistance: 35 miles\r\nStart: ".$a_time."\r\nEnd: ".$a_endtime."\r\nDuration: 3 hours\r\nLayovers: None\r\n</span></a></div>");
}else{
}
}
}
}
return $cellLink . $cellSoldout;
}
for ($i=0; $i<($maxday+$startday); $i++) {
if(($i % 7) == 0 ) echo "<tr>";
if($i < $startday) echo "<td></td>";
else echo "<td class='cornernum' align='center' valign='middle' height='20px'><span>".($i - $startday + 1) ."</span><br />". getDateCellContent($obj, $cYear.'-'.$cMonth.'-'.($i - $startday + 1)) ."</td>";
if(($i % 7) == 6 ) echo "</tr>";
}
?>
</table>
</td>
</tr>
</table>
<div class='my-legend'>
<div class='legend-title'>Calendar Trip Legend</div>
<div class='legend-scale'>
<ul class='legend-labels'>
<li><span style='background:#f4eb12;'></span>Trip - 1:00PM</li>
<li><span style='background:#f7951d;'></span>Trip - 10:00 AM & 2:30 PM</li>
<li><span style='background:#6a52a2;'></span>Trip - 6:00 PM</li>
<li><span style='background:#44b649;'></span>Special - 10:00 AM</li>
<li><span style='background:#e22627;'></span>Day Trip - 10:00 AM</li>
<li><span style='background:#00ffff;'></span>Special</li>
<li><span style='background:#1670b8;'></span>Express</li>
</ul>
</div>
</div>
<table class="pricing">
<tr>
<td class="pricing" style="background:#FFF;">
<table>
<thead><h4>First</h4></thead>
<th></th><th>Trip</th><th>Spring</th><th>Day Trip</th>
<tbody>
<tr><td>Adults</td><td>$100</td><td>$50</td><td>$200</td></tr>
</tbody>
</table>
</td>
<td class="pricing" style="background:#FFF;">
<table>
<thead><h4>Second</h4></thead>
<th></th><th>Trip</th><th>Spring</th><th>Day Trip</th>
<tbody>
<tr><td>All</td><td>$100</td><td>$50</td><td>$150</td></tr>
<tr><td>Child over 5</td><td>$30</td><td>$10</td><td>$35</td></tr>
<tr><td>Child under 5</td><td>Free</td><td>Free</td><td>Free</td></tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="pricing">
<table>
<thead><h4>Third</h4></thead>
<th></th><th>Trip</th><th>Spring</th><th>Day Trip</th>
<tbody>
<tr><td>Adults</td><td>$70</td><td>$25</td><td>$100</td></tr>
<tr><td>Seniors</td><td>$60</td><td>$25</td><td>$75</td></tr>
<tr><td>Child</td><td>$40</td><td>$20</td><td>$50</td></tr>
<tr><td>Child over 5</td><td>$10</td><td>$10</td><td>$10</td></tr>
<tr><td>Child under 5</td><td>Free</td><td>Free</td><td>Free</td></tr>
</tbody>
</table>
</td>
<td class="pricing">
<table>
<thead><h4>Fourth</h4></thead>
<th></th><th>Trip</th><th>Spring</th><th>Day Trip</th>
<tbody>
<tr><td>Adults</td><td>$50</td><td>$25</td><td>$100</td></tr>
<tr><td>Seniors</td><td>$50</td><td>$25</td><td>$100</td></tr>
<tr><td>Child</td><td>$25</td><td>$15</td><td>$25</td></tr>
<tr><td>Child under 5</td><td>Free</td><td>Free</td><td>Free</td></tr>
</tbody>
</table>
</td>
</tr>
</table>
I saw a post about changing the layout completely but just changing a few things and placing it in does not work, so I need figure this out to get it working with this PHP and HTML layout.
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
table, thead, tbody, th, td, tr {
display: block;
}
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr { border: 1px solid #ccc; }
td {
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
td:before {
position: absolute;
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
td:nth-of-type(1):before { content: "Sun"; }
td:nth-of-type(2):before { content: "Mon"; }
td:nth-of-type(3):before { content: "Tues"; }
td:nth-of-type(4):before { content: "Wed"; }
td:nth-of-type(5):before { content: "Thurs"; }
td:nth-of-type(6):before { content: "Fri"; }
td:nth-of-type(7):before { content: "Sat"; }
}
I tried changing the above CSS around a bit and also tried not using block but I keep getting a screwed up looking layout. I want to say it is because of how the PHP is in an array and the CSS is not seeing it but I am not 100% sure.
2 answers
solution1
1 2020-04-10 11:00:53
I just wrote code for responsive tables that use a lot of similar parts that you use in your CSS. I tried to keep the code as simple as possible.
In my opinion if you use the following:
td:nth-of-type(1):before { content: "Sun"; }
td:nth-of-type(2):before { content: "Mon"; }
td:nth-of-type(3):before { content: "Tues"; }
td:nth-of-type(4):before { content: "Wed"; }
td:nth-of-type(5):before { content: "Thurs"; }
td:nth-of-type(6):before { content: "Fri"; }
td:nth-of-type(7):before { content: "Sat"; }
I don't think hard coding the Pseudo elements like this is good practice especially if you have multiple tables on the one page, which was the problem I was having so I fixed this with JQuery.
If you need additional help with this just let me know
solution2
1 2020-04-10 14:08:33
Here is your code repurposed without Calendar, Legend Key just to give you layouts for the four tables the way you currently have it and also to work responsively. Just to make it easier I have included the CSS, JS and HTML in the one file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=s, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<title>Responsive Tables</title>
</head>
<style>
/* YOUR CODE */
.m_buttons {
color: #000;
background-color:#DFDFDF;
text-decoration:none;
}
.m_buttons:hover {
color: #000;
background-color:#999999;
text-decoration: underline;
}
.pricing {
border:none !important;
}
.cornernum {
height: 150px;
width: 150px;
margin-right: 5.5px;
margin-left: 5.5px;
margin-bottom: 5.5px;
margin-top: 5.5px;
position: relative;
}
.cornernum > span {
position: absolute;
top: 5px;
right: 5px;
font-weight: bold;
}
.popupinfo {
border-bottom: 1px dotted #000; color: #000; outline: none;
text-decoration: none;
position: relative;
}
.popupinfo span {
margin-left: -999em;
position: absolute;
}
.popupinfo:hover span {
border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
font-family: Calibri, Tahoma, Geneva, sans-serif;
position: absolute; left: 1em; top: 2em; z-index: 99;
margin-left: 0; width: 175px;
text-align:left;
}
.popupinfo:hover img {
border: 0;
margin: 0px;
position: relative;
padding-left: 12px;
}
.popupinfo:hover em {
font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
display: block; padding: 0.2em 0 0.6em 0;
}
* html a:hover { background: transparent; }
.classic {background: #FFFFAA; border: 1px solid #ccc; padding: 0.8em 1em; }
.link1 {color: #000; background-color:#f4eb12; text-decoration:none; word-wrap: break-word; margin-bottom:2px;}
.link1:hover {color: #000; background-color:#ffff99; text-decoration: underline; margin-bottom:2px;}
.link2 {color: #000; background-color:#f7951d; text-decoration:none; word-wrap: break-word; margin-bottom:2px;}
.link2:hover {color: #000; background-color:#ffcc99; text-decoration: underline; margin-bottom:2px;}
.link3 {color: #000; background-color:#f7951d; text-decoration:none; word-wrap: break-word; margin-bottom:2px;}
.link3:hover {color: #000; background-color:#ffcc99; text-decoration: underline; margin-bottom:2px;}
.link4 {color: #000; background-color:#00ffff; text-decoration:none; word-wrap: break-word; margin-bottom:2px;}
.link4:hover {color: #000; background-color:#99ffff; text-decoration: underline; margin-bottom:2px;}
.link5 {color: #000; background-color:#6a52a2; text-decoration:none; word-wrap: break-word; margin-bottom:2px;}
.link5:hover {color: #000; background-color:#996699; text-decoration: underline; margin-bottom:2px;}
.link6 {color: #000; background-color:#44b649; text-decoration:none; word-wrap: break-word; margin-bottom:2px;}
.link6:hover {color: #000; background-color:#99cc99; text-decoration: underline; margin-bottom:2px;}
.link7 {color: #000; background-color:#e22627; text-decoration:none; word-wrap: break-word; margin-bottom:2px;}
.link7:hover {color: #000; background-color:#cc9999; text-decoration: underline; margin-bottom:2px;}
.link8 {color: #000; background-color:#1670b8; text-decoration:none; word-wrap: break-word; margin-bottom:2px;}
.link8:hover {color: #000; background-color:#6699cc; text-decoration: underline; margin-bottom:2px;}
.link9 {color: #000; background-color:#1670b8; text-decoration:none; word-wrap: break-word; margin-bottom:2px;}
.link9:hover {color: #000; background-color:#6699cc; text-decoration: underline; margin-bottom:2px;}
.link10 {color: #000; background-color:#1670b8; text-decoration:none; word-wrap: break-word; margin-bottom:2px;}
.link10:hover {color: #000; background-color:#6699cc; text-decoration: underline; margin-bottom:2px;}
.link11 {color: #000; background-color:#00ffff; text-decoration:none; word-wrap: break-word; margin-bottom:2px;}
.link11:hover {color: #000; background-color:#99ffff; text-decoration: underline; margin-bottom:2px;}
.my-legend .legend-title {
text-align: left;
margin-bottom: 5px;
font-weight:bold;
font-size: 100%;
}
.my-legend .legend-scale ul {
margin: 0;
margin-bottom: 5px;
padding: 0;
float: left;
list-style: none;
}
.my-legend .legend-scale ul li {
font-size: 80%;
list-style: none;
margin-left: 0;
line-height: 18px;
margin-bottom: 2px;
font-weight:bold;
}
.my-legend ul.legend-labels li span {
display: block;
float: left;
height: 16px;
width: 30px;
margin-right: 5px;
margin-left: 0;
border: 1px solid #999;
}
.my-legend .legend-source {
font-size: 70%;
color: #999;
clear: both;
}
.my-legend a {
color: #777;
}
/* CLOSE YOUR CODE */
/* MYCODE */
@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");
.table-container {
background: #FFFFFF;
margin: 2% 1.5%;
padding: 1%;
color: #555555;
font-family: 'Roboto';
font-size: 13px;
font-weight: 400;
}
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
/* Table Header Cell and Standard Cell */
th,
td {
text-align: left;
padding: 8px;
}
/* Table Headings */
th {
color: #555555;
background: #DDD;
font-family: 'Roboto';
font-size: 12px;
font-weight: 600;
}
/* For All Devices Above 600px */
@media only screen and (min-width: 600px) {
/* Styles the background color off every odd table row */
tr:nth-child(odd) {
background: #F2F2F2 ;
}
}
/* Close Media Query */
/* For All Devices Below 600px */
@media only screen and (max-width: 600px) {
.container {
margin: 3.5% 1.5%;
}
/* Force table to not be like tables anymore */
table,
thead,
tbody,
th,
td,
tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
/* Add Border to make easier to read*/
tr {
border: 1px solid #ccc;
}
/* Behave like a "row" */
td {
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 60%;
}
td:nth-child(1) {
background: #DDD;
}
/* Now like a table header */
td:before {
position: absolute;
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
font-weight: 600;
}
/* Hide Table Headings */
th {
display: none;
}
}
/* CLOSE MY CODE */
</style>
<body style="background:#F2F2F2">
<!-- This is populated dynamically with JQuery since Pseudo elements can't be set in JS-->
<div id="custom-css"></div>
<!-- DONT DELETE THIS DIV -->
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="table-container">
<table>
<thead><h4>First</h4></thead>
<th></th><th>Trip</th><th>Spring</th><th>Day Trip</th>
<tbody>
<tr><td>Adults</td><td>$100</td><td>$50</td><td>$200</td></tr>
</tbody>
</table>
</div>
</div>
<div class="col-lg-6">
<div class="table-container">
<table>
<thead><h4>Second</h4></thead>
<th></th><th>Trip</th><th>Spring</th><th>Day Trip</th>
<tbody>
<tr><td>All</td><td>$100</td><td>$50</td><td>$150</td></tr>
<tr><td>Child over 5</td><td>$30</td><td>$10</td><td>$35</td></tr>
<tr><td>Child under 5</td><td>Free</td><td>Free</td><td>Free</td></tr>
</tbody>
</table>
</div>
</div>
<div class="col-lg-6">
<div class="table-container">
<table>
<thead><h4>Third</h4></thead>
<th></th><th>Trip</th><th>Spring</th><th>Day Trip</th>
<tbody>
<tr><td>Adults</td><td>$70</td><td>$25</td><td>$100</td></tr>
<tr><td>Seniors</td><td>$60</td><td>$25</td><td>$75</td></tr>
<tr><td>Child</td><td>$40</td><td>$20</td><td>$50</td></tr>
<tr><td>Child over 5</td><td>$10</td><td>$10</td><td>$10</td></tr>
<tr><td>Child under 5</td><td>Free</td><td>Free</td><td>Free</td></tr>
</tbody>
</table>
</div>
</div>
<div class="col-lg-6">
<div class="table-container">
<table>
<thead><h4>Fourth</h4></thead>
<th></th><th>Trip</th><th>Spring</th><th>Day Trip</th>
<tbody>
<tr><td>Adults</td><td>$50</td><td>$25</td><td>$100</td></tr>
<tr><td>Seniors</td><td>$50</td><td>$25</td><td>$100</td></tr>
<tr><td>Child</td><td>$25</td><td>$15</td><td>$25</td></tr>
<tr><td>Child under 5</td><td>Free</td><td>Free</td><td>Free</td></tr>
</tbody>
</table>
</div><!-- close table container -->
</div><!-- close col-6 -->
</div><!-- end row -->
</div><!-- close container fluid -->
</body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
function responsiveTable(screenSize) {
// If media query is below 600px
if (screenSize.matches) {
// Array to push up CSS styles too
var stylesArray = [];
// Getting the amount of tables
var tableCount = $('table').length;
// Iterate through each table
for(a = 0; a <= tableCount; a++) {
// Target each indivdual table
var tableClass = ".table-container:nth-of-type("+(a+1)+") table";
// Declaring unique table class
var newTableClass = "table-"+(a);
// Add Unique Class to each table occurence
$(tableClass).addClass(newTableClass);
// Getting Table Headings for Indivdual Classes
var tableClassHeading = "."+newTableClass + " th";
// Count the table headings
var tableHeadingCount = $(tableClassHeading).length;
// Iterate through Table Headings
for(i = 0; i < tableHeadingCount; i++) {
// Adding the . notation to make it a class to use with JQuery
var editedClass = "."+newTableClass;
// Getting the value of the table heading
var tableHeading = $(editedClass).find("th").eq(i).html();
// Creating CSS Style and Setting Table Row (Heading) with Table Heading;
var cssRole = editedClass+' td:nth-of-type('+(i+1)+'):before {content: "'+tableHeading+'"}';
// Pushing CSS style to Styles Array
stylesArray.push(cssRole);
}// close the i for loop
} //close the a for loop
// Building the CSS stylesheet
var styleSheet = "<style> ";
// Iterate through each style rule
for(q = 0; q < stylesArray.length; q++) {
// Setting the CSS Rule
var indivdualStyleRule = stylesArray[q];
// Appending the rule to string
styleSheet += indivdualStyleRule;
}
// Finished CSS Style
var finishedStyleSheet = styleSheet + " </style>";
// Add Style to HTML
$('#custom-css').append(finishedStyleSheet);
}// close if for media query
else {
// Clear all styles that were created
$('#custom-css').empty();
}// close else
}// close responiveTable function
// Set the responsive width for tables. Must match value set in css
var smallScreenSize = window.matchMedia("(max-width: 600px)");
// Call listener responsiveTable function at run time
responsiveTable(smallScreenSize);
// Attach listener function on state changes
smallScreenSize.addListener(responsiveTable);
</script>
</html>
So should look like this on desktop
and look like this on mobile / responsive view
I really hope this helps man!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Making a site mobile friendly
Mobile friendly data table
Identify if a website is mobile friendly or not
PHP CSS Mobile Responsive
Bootstrap Form Is Not Responsive In Mobile
How to format table to something mobile friendly?
Redirect a site to a Mobile version, error with Google Mobile-Friendly Test
Add CSS Avada responsive mobile
Screen Responsive PHP tables in HTML
Responsive Bootstrap Tables with a looped <tr>
Related Tags