css - 页面中有两个独立的响应表

Question

尝试在页面中创建分隔表:Kompiuterių nuoma

手机上的第一个表格看起来不错，但是，第二个使用与第一个相同的标签。如何让它继续下去？

CSS:

 table {
   width: 100%;
   border-collapse: collapse;
 }
 tr:nth-of-type(odd) {
   background: #eee;
 }
 th {
   background: #fbfbfb;
   color: black;
   font-weight: bold;
 }
 td,
 th {
   padding: 6px;
   border: 1px solid #ccc;
   text-align: left;
 }
 */@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: "";
   }
   td:nth-of-type(2):before {
     content: "MSO 365 Business";
   }
   td:nth-of-type(3):before {
     content: "ESET Endpoint AV";
   }
   td:nth-of-type(4):before {
     content: "ESET Endpoint SEC";
   }
   td:nth-of-type(5):before {
     content: "Krepšys";
   }
   td:nth-of-type(6):before {
     content: "Klaviatūra?";
   }
   td:nth-of-type(7):before {
     content: "Laidinė pelė";
   }
   td:nth-of-type(8):before {
     content: "Bevielė pelė";
   }
   td:nth-of-type(9):before {
     content: "USB Dock";
   }
   td:nth-of-type(10):before {
     content: "Basic Dock";
   }
   td:nth-of-type(11):before {
     content: "Pro Dock";
   }
   td:nth-of-type(12):before {
     content: "Kaina";
   }
 }

Answer 1

如果您向包含标题文本的 td 添加一个属性，您就可以完全消除将所有标题存储在 CSS 中的需要，并将您的代码简化为:

td:before {
    content: attr(title);
}

这适用于任意数量的表格，也意味着您可以轻松地将数据源中的正确标题直接输出到您的标记中；将它从你的 CSS 中完全移除。

例子:

table {
   width: 100%;
   border-collapse: collapse;
    margin-bottom: 30px;
 }
 tr:nth-of-type(odd) {
   background: #eee;
 }
 th {
   background: #fbfbfb;
   color: black;
   font-weight: bold;
 }
 td,
 th {
   padding: 6px;
   border: 1px solid #ccc;
   text-align: left;
 }
 @media only screen and (max-width: 760px) {
   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:before {
     content: attr(title);
   }
 }

<table>
    <tr>
        <th>Title 1</th>
        <th>Title 2</th>
    </tr>
    <tr>
        <td title="Title 1">1 TD</td>
        <td title="Title 2">2 TD</td>
    </tr>
    <tr>
        <td title="Title 1">3 TD</td>
        <td title="Title 2">4 TD</td>
    </tr>
    <tr>
        <td title="Title 1">5 TD</td>
        <td title="Title 2">6 TD</td>
    </tr>
    <tr>
        <td title="Title 1">7 TD</td>
        <td title="Title 2">8 TD</td>
    </tr>
</table>

<table>
    <tr>
        <th>Title 3</th>
        <th>Title 4</th>
    </tr>
    <tr>
        <td title="Title 3">9 TD</td>
        <td title="Title 4">10 TD</td>
    </tr>
    <tr>
        <td title="Title 3">11 TD</td>
        <td title="Title 4">12 TD</td>
    </tr>
    <tr>
        <td title="Title 3">13 TD</td>
        <td title="Title 4">14 TD</td>
    </tr>
    <tr>
        <td title="Title 3">15 TD</td>
        <td title="Title 4">16 TD</td>
    </tr>
</table>

JSFIDDLE VERSION