Отзывчивые мобильные дружественные столы - PullRequest
Новая
       10

Отзывчивые мобильные дружественные столы

0 голосов
/ 08 апреля 2020

Решено, Удалить Пожалуйста, извините за редактирование, а затем удаление снова, что это такое. Не хочу больше никого беспокоить этим.

Ответы [ 2 ]

0 голосов
/ 10 апреля 2020

Вот ваш код, переназначенный без Calendar, 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>

Так должно выглядеть this на рабочем столе

и выглядит как это на мобильном / адаптивном виде

Я очень надеюсь, что это поможет человеку!

0 голосов
/ 10 апреля 2020

Я только что написал код для адаптивных таблиц, который использует много похожих частей, которые вы используете в 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.

Проверьте предварительный просмотр кода здесь

Если это поможет, вы можете скачать мой код здесь

Если вам нужна дополнительная помощь, просто дайте мне знать

...