响应式移动友好表

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.

Answer 1

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

Answer 2

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!