堆棧內存溢出
  簡體   English   中英

響應式移動友好表

[英]Responsive Mobile Friendly Tables

 原文  2020-04-08 20:05:22  1   2    php/ html/ css/ html-table

問題描述

我已經嘗試完成一個頁面的布局一個多星期或更長時間了。 我的頁面有點工作。 我需要一些有關原始布局的幫助，以及使其對移動設備友好。 原始布局的問題在於，隨着更多數據進入某些框，這些框會增加高度，而其他框保持較小。 我需要它們始終是相同大小的框以獲得好看的日歷，同時我調整頁面大小以模擬不同的屏幕尺寸日歷中的框變得非常長，其中包含數據並且文本用完框。 我添加了word-wrap: break-word; 到桌子上，現在文字看起來很奇怪，所以我想我可能是在錯誤地處理這個問題。

重新設計移動設備可能是最好的。 一個問題是單個頁面上有多個表，並且都使用相同的 css。 我認為另一個問題是我正在使用 PHP 來填充日歷表的<td>部分中的一些事件。

讓我展示我所擁有的並將其分解。

當前 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;
}

當前 PHP 和 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>

我看到了一篇關於完全更改布局的帖子，但只是更改了一些內容並將其放入其中不起作用，因此我需要弄清楚這一點才能使其與 PHP 和 HTML 布局一起使用。

@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"; }
}

我嘗試稍微更改上面的 CSS 並且還嘗試不使用塊，但我一直得到一個搞砸的布局。 我想說這是因為 PHP 是如何在數組中的，而 CSS 沒有看到它，但我不是 100% 確定。

2 個解決方案

解決方案1
 1  2020-04-10 11:00:53

我剛剛為響應式表編寫了代碼，這些代碼使用了您在 CSS 中使用的許多類似部分。 我試圖使代碼盡可能簡單。

在我看來，如果您使用以下內容：

    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"; }

我不認為像這樣對偽元素進行硬編碼是一種好習慣，特別是如果您在一頁上有多個表格，這是我遇到的問題，所以我用 JQuery 解決了這個問題。

如果您需要更多幫助，請告訴我

解決方案2
 1  2020-04-10 14:08:33

這是您的代碼在沒有日歷、Legend Key 的情況下重新調整用途，只是為了按照您當前擁有的方式為您提供四個表格的布局，並且還可以響應式地工作。 為了方便起見，我在一個文件中包含了 CSS、JS 和 HTML

<!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>

所以應該在桌面上看起來像這樣

在移動/響應視圖上看起來像這樣

我真的希望這對男人有幫助！

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 使網站移動友好 移動友好數據表 識別網站是否適合移動設備 PHP CSS移動響應 Bootstrap形式在移動設備中不響應 如何將表格格式化為適合移動設備的內容？ 將網站重定向到移動版，Google移動友好測試時出錯 添加CSS Avada自適應移動設備 HTML 中的屏幕響應式 PHP 表格 帶有循環的響應式引導表<tr>
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM