CSS 响应代码在 class 元素下给出时不起作用

Question

CSS 的新手！我编写了 css 代码以使我的表格响应。当直接放在 <style> 标签中时，相同的代码可以完美地工作，但是当我放置 class 并在 div 中引用 class 时，它不起作用。以下是代码：

正在工作：

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

Answer 1

因为您要在父 div 元素中添加 class，即 custom-accordionable 当你做 css.[=25= 时，你必须每隔 table、tr、th、td 传递那个父元素 class ]

这是一个最好的例子：（另外，当你进行媒体查询时，css class 应该在媒体查询标签内才能工作。）

<!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 标签来 link 你的 head 标签内的那个样式。

<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...
}

这样您就可以拥有更清晰的代码，而不是将所有样式都放在 html 文档中的 style 标记中。

CSS 响应代码在 class 元素下给出时不起作用

CSS responsive code not working when given under class element

html

css

html-table

responsive-design