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

页面中有两个单独的响应表

1 个答案: