CSS отзывчивый код не работает, если задан под элементом класса - PullRequest
Новая
       36

CSS отзывчивый код не работает, если задан под элементом класса

1 голос
/ 02 августа 2020

Новое в CSS! У меня есть код css, чтобы мои таблицы реагировали. Тот же код отлично работает, когда помещается внутрь непосредственно в тег <style>, но не работает, когда я помещаю класс и ссылаюсь на этот класс в div. Ниже приведены коды:

РАБОТАЕТ: 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

    /* 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;
    }
    
    tr { border: 1px solid #ccc; }
    
    td { 
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        padding-left: 50%; 
    }
    
    td:before { 
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%; 
        padding-right: 10px; 
        white-space: nowrap;
    }
    
    /*
    Label the data
    */
    td:nth-of-type(1):before { content: "First Name"; }
    td:nth-of-type(2):before { content: "Last Name"; }
    td:nth-of-type(3):before { content: "Job Title"; }
    td:nth-of-type(4):before { content: "Favorite Color"; }
    td:nth-of-type(5):before { content: "Wars of Trek?"; }
    td:nth-of-type(6):before { content: "Secret Alias"; }
    td:nth-of-type(7):before { content: "Date of Birth"; }
    td:nth-of-type(8):before { content: "Dream Vacation City"; }
    td:nth-of-type(9):before { content: "GPA"; }
    td:nth-of-type(10):before { content: "Arbitrary Data"; }
}

</style>
</head>
<body>


<div>
  <table>
    <thead>
    <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Job Title</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>James</td>
        <td>Matman</td>
        <td>Chief Sandwich Eater</td>
    </tr>
    <tr>
        <td>The</td>
        <td>Tick</td>
        <td>Crimefighter Sorta</td>
    </tr>
    </tbody>
</table>
</div>

</body>
</html>

НЕ РАБОТАЕТ: 

<!DOCTYPE html>
<html>
<head>
<style>
.custom-accordiontable{

  /*
    Max width before this PARTICULAR table gets nasty. This query will take effect for any screen smaller than 760px and also iPads specifically.
    */
    @media
      only screen 
    and (max-width: 760px), (min-device-width: 768px) 
    and (max-device-width: 1024px)  {

        /* 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;
        }

    tr {
      margin: 0 0 1rem 0;
    }
      
    tr:nth-child(odd) {
      background: #ccc;
    }
    
        td {
            /* Behave  like a "row" */
            border: none;
            border-bottom: 1px solid #eee;
            position: relative;
            padding-left: 50%;
        }

        td:before {
            /* Now like a table header */
            position: absolute;
            /* Top/left values mimic padding */
            top: 0;
            left: 6px;
            width: 45%;
            padding-right: 10px;
            white-space: nowrap;
        }

        /*
        Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
        */
        td:nth-of-type(1):before { content: "First Name"; }
        td:nth-of-type(2):before { content: "Last Name"; }
        td:nth-of-type(3):before { content: "Job Title"; }
        td:nth-of-type(4):before { content: "Favorite Color"; }
        td:nth-of-type(5):before { content: "Wars of Trek?"; }
        td:nth-of-type(6):before { content: "Secret Alias"; }
        td:nth-of-type(7):before { content: "Date of Birth"; }
        td:nth-of-type(8):before { content: "Dream Vacation City"; }
        td:nth-of-type(9):before { content: "GPA"; }
        td:nth-of-type(10):before { content: "Arbitrary Data"; }
    }
}
</style>
</head>
<body>

<div class="custom-accordiontable">
  <table>
    <thead>
    <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Job Title</th>
    </tr>
    </thead>
 <tbody>
 <tr>
    <td>James</td>
    <td>Matman</td>
    <td>Chief Sandwich Eater</td>
</tr>
    
    </tbody>
</table>
</div>

</body>
</html>

1 Ответ

1 голос
/ 02 августа 2020

Поскольку вы добавляете класс в родительский элемент div, который равен custom-accordionable, вы должны передавать этот класс родительского элемента каждые table, tr, th, td, когда вы выполняете css .

Вот лучший пример: (Также, когда вы выполняете медиа-запросы, класс css должен находиться внутри тега медиа-запроса, чтобы он работал.) 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

    /* Force table to not be like tables anymore */
    .custom-accordiontable table, .custom-accordiontable thead, .custom-accordiontable tbody, .custom-accordiontable th, .custom-accordiontable td, .custom-accordiontable tr { 
        display: block; 
    }
    
    /* Hide table headers (but not display: none;, for accessibility) */
    .custom-accordiontable thead tr { 
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    
    .custom-accordiontable tr { border: 1px solid #ccc; }
    
    .custom-accordiontable td { 
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        padding-left: 50%; 
    }
    
    .custom-accordiontable td:before { 
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%; 
        padding-right: 10px; 
        white-space: nowrap;
    }
    
    /*
    Label the data
    */
    .custom-accordiontable td:nth-of-type(1):before { content: "First Name"; }
    .custom-accordiontable td:nth-of-type(2):before { content: "Last Name"; }
    .custom-accordiontable td:nth-of-type(3):before { content: "Job Title"; }
    .custom-accordiontable td:nth-of-type(4):before { content: "Favorite Color"; }
    .custom-accordiontable td:nth-of-type(5):before { content: "Wars of Trek?"; }
    .custom-accordiontable td:nth-of-type(6):before { content: "Secret Alias"; }
    .custom-accordiontable td:nth-of-type(7):before { content: "Date of Birth"; }
    .custom-accordiontable td:nth-of-type(8):before { content: "Dream Vacation City"; }
    .custom-accordiontable td:nth-of-type(9):before { content: "GPA"; }
    .custom-accordiontable td:nth-of-type(10):before { content: "Arbitrary Data"; }
}

</style>
</head>
<body>


<div class="custom-accordiontable">
  <table>
    <thead>
    <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Job Title</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>James</td>
        <td>Matman</td>
        <td>Chief Sandwich Eater</td>
    </tr>
    <tr>
        <td>The</td>
        <td>Tick</td>
        <td>Crimefighter Sorta</td>
    </tr>
    </tbody>
</table>
</div>

</body>
</html>

Быстрые подсказки

[1] Когда вы используете css без ответа, у вас должен быть файл с именем styles.css и использовать тег link, чтобы связать этот стиль внутри вашего head tag. 

<head>
  <link rel="stylesheet" href="styles.css">
</head>

2 Когда вы используете медиа-запросы для внесения некоторых изменений в адаптивном режиме, добавьте еще один файл с именем media.css, чтобы разделить ваши стили только в медиа-запросах. 

<head>
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="media.css">
</head>

И внутри вашего медиа-файла это должно вызывать только медиа-запросы и определенную ширину, которую вы хотите изменить.

Вот несколько примеров: 

@media only screen and (max-width: 1024px) {
  // do some css modification here...
}
@media only screen and (max-width: 600px) {
  // do some css modification here...
}

Таким образом, вы может иметь более чистый код и не помещать все стили в тег style в вашем html документ.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...