可堆叠表格 - HTML/CSS 问题

Question

我的网站是Greatest Reviews

我目前正在使用this tutorial 创建一个响应式 HTML 表格，它在台式机和移动设备上都看起来不错。 （甚至平板电脑）

问题是，因为每个帖子都有不同的“类别”，如果你愿意的话，我必须继续复制 CSS 并使用 responsive2 或 responsive3 再次粘贴...

这通常有效，但有时无效，这真的让我感到沮丧。

有没有办法对所有具有不同数据的表只使用一组 CSS？

/* responsive tables */
.responsive-stacked-table {
    width: 100%;
    border: 1px solid #ddd;
    border-collapse: collapse;
    table-layout: fixed;
}
.responsive-stacked-table th,
.responsive-stacked-table td {
    padding: 10px;
    border-top: 1px solid #ddd;
}
.responsive-stacked-table thead {
    background: #eee;
    border-bottom: 3px solid #ddd;
}
.responsive-stacked-table tr:nth-child(even) {
    background: #f5f5f5;
}
.responsive-stacked-table .fa {
    margin-right: 5px;
}
.responsive-stacked-table .fa-check-circle {
    color: #690;
}
.responsive-stacked-table .fa-times-circle {
    color: #c00;
}

.responsive-stacked-table.with-mobile-labels {
    font-size: .85em;
}

@media (max-width: 1199px) {
    .container {
        width: auto;
        padding: 0px;
    }
}

@media (max-width: 767px) {
    .responsive-stacked-table thead {
        display: none;
    }
    .responsive-stacked-table tr,
    .responsive-stacked-table th,
    .responsive-stacked-table td {
        display: block;
    }
    .responsive-stacked-table td {
        border-top: none;
    }
    .responsive-stacked-table tr td:first-child {
        border-top: 1px solid #ddd;
        font-weight: bold;
    }
    .responsive-stacked-table.with-mobile-labels tr td:first-child {
        font-weight: 300;
    }
    .responsive-stacked-table.with-mobile-labels td:before {
        display: block;
        font-weight: bold;
    }
    .responsive-stacked-table.with-mobile-labels td:nth-of-type(1):before {
        content: "Model:";
    }
    .responsive-stacked-table.with-mobile-labels td:nth-of-type(2):before {
        content: "Good Points:";
    }
    .responsive-stacked-table.with-mobile-labels td:nth-of-type(3):before {
        content: "Bad Points:";
    }
    .responsive-stacked-table.with-mobile-labels td:nth-of-type(4):before {
        content: "Conclusion:";
    }
    .responsive-stacked-table.with-mobile-labels td:nth-of-type(5):before {
        content: "Check Price:";
    }
}

/* responsive fireplace */


.responsive2-stacked-table {
    width: 100%;
    border: 1px solid #ddd;
    border-collapse: collapse;
    table-layout: fixed;
}
.responsive2-stacked-table th,
.responsive2-stacked-table td {
    padding: 10px;
    border-top: 1px solid #ddd;
}
.responsive2-stacked-table thead {
    background: #eee;
    border-bottom: 3px solid #ddd;
}
.responsive2-stacked-table tr:nth-child(even) {
    background: #f5f5f5;
}
.responsive2-stacked-table .fa {
    margin-right: 5px;
}
.responsive2-stacked-table .fa-check-circle {
    color: #690;
}
.responsive2-stacked-table .fa-times-circle {
    color: #c00;
}

.responsive2-stacked-table.with-mobile-labels {
    font-size: 12px;
}

@media (max-width: 1199px) {
    .container {
        width: auto;
        padding: 0px;
    }
}

@media (max-width: 767px) {
    .responsive2-stacked-table thead {
        display: none;
    }
    .responsive2-stacked-table tr,
    .responsive2-stacked-table th,
    .responsive2-stacked-table td {
        display: block;
    }
    .responsive2-stacked-table td {
        border-top: none;
    }
    .responsive2-stacked-table tr td:first-child {
        border-top: 1px solid #ddd;
        font-weight: bold;
    }
    .responsive2-stacked-table.with-mobile-labels tr td:first-child {
        font-weight: 300;
    }
    .responsive2-stacked-table.with-mobile-labels td:before {
        display: block;
        font-weight: bold;
    }
    .responsive2-stacked-table.with-mobile-labels td:nth-of-type(1):before {
        content: "Model:";
    }
    .responsive2-stacked-table.with-mobile-labels td:nth-of-type(2):before {
        content: "Image:";
    }
    .responsive2-stacked-table.with-mobile-labels td:nth-of-type(3):before {
        content: "Watts:";
    }
    .responsive2-stacked-table.with-mobile-labels td:nth-of-type(4):before {
        content: "Dimensions:";
    }
    .responsive2-stacked-table.with-mobile-labels td:nth-of-type(5):before {
        content: "Style:";
    }
    .responsive2-stacked-table.with-mobile-labels td:nth-of-type(6):before {
        content: "Read Full Review:";
    }
    .responsive2-stacked-table.with-mobile-labels td:nth-of-type(7):before {
        content: "Score:";
    }
        .responsive2-stacked-table.with-mobile-labels td:nth-of-type(8):before {
        content: "Check Price:";
    }
}


/* responsive badminton racket */


.responsive3-stacked-table {
    width: 100%;
    border: 1px solid #ddd;
    border-collapse: collapse;
    table-layout: fixed;
}
.responsive3-stacked-table th,
.responsive3-stacked-table td {
    padding: 10px;
    border-top: 1px solid #ddd;
}
.responsive3-stacked-table thead {
    background: #eee;
    border-bottom: 3px solid #ddd;
}
.responsive3-stacked-table tr:nth-child(even) {
    background: #f5f5f5;
}
.responsive3-stacked-table .fa {
    margin-right: 5px;
}
.responsive3-stacked-table .fa-check-circle {
    color: #690;
}
.responsive3-stacked-table .fa-times-circle {
    color: #c00;
}

.responsive3-stacked-table.with-mobile-labels {
    font-size: 12px;
}

@media (max-width: 1199px) {
    .container {
        width: auto;
        padding: 0px;
    }
}

@media (max-width: 767px) {
    .responsive3-stacked-table thead {
        display: none;
    }
    .responsive3-stacked-table tr,
    .responsive3-stacked-table th,
    .responsive3-stacked-table td {
        display: block;
    }
    .responsive3-stacked-table td {
        border-top: none;
    }
    .responsive3-stacked-table tr td:first-child {
        border-top: 1px solid #ddd;
        font-weight: bold;
    }
    .responsive3-stacked-table.with-mobile-labels tr td:first-child {
        font-weight: 300;
    }
    .responsive3-stacked-table.with-mobile-labels td:before {
        display: block;
        font-weight: bold;
    }
    .responsive3-stacked-table.with-mobile-labels td:nth-of-type(1):before {
        content: "Model:";
    }
    .responsive3-stacked-table.with-mobile-labels td:nth-of-type(2):before {
        content: "Image:";
    }
    .responsive3-stacked-table.with-mobile-labels td:nth-of-type(3):before {
        content: "Weight:";
    }
    .responsive3-stacked-table.with-mobile-labels td:nth-of-type(4):before {
        content: "Grip Size:";
    }
    .responsive3-stacked-table.with-mobile-labels td:nth-of-type(5):before {
        content: "Flex:";
    }
        .responsive3-stacked-table.with-mobile-labels td:nth-of-type(6):before {
        content: "String:";
    }
    .responsive3-stacked-table.with-mobile-labels td:nth-of-type(7):before {
        content: "String Tension:";
    }    
    .responsive3-stacked-table.with-mobile-labels td:nth-of-type(8):before {
        content: "Balance:";
    }    
    .responsive3-stacked-table.with-mobile-labels td:nth-of-type(9):before {
        content: "Read Full Review:";
    }
    .responsive3-stacked-table.with-mobile-labels td:nth-of-type(10):before {
        content: "Score:";
    }    

    .responsive3-stacked-table.with-mobile-labels td:nth-of-type(11):before {
        content: "Check Price:";
    }
}


/* responsive oil filled radiators */
.responsive4-stacked-table {
    width: 100%;
    border: 1px solid #ddd;
    border-collapse: collapse;
    table-layout: fixed;
}
.responsive4-stacked-table th,
.responsive4-stacked-table td {
    padding: 10px;
    border-top: 1px solid #ddd;
}
.responsive4-stacked-table thead {
    background: #eee;
    border-bottom: 3px solid #ddd;
}
.responsive4-stacked-table tr:nth-child(even) {
    background: #f5f5f5;
}
.responsive4-stacked-table .fa {
    margin-right: 5px;
}
.responsive4-stacked-table .fa-check-circle {
    color: #690;
}
.responsive4-stacked-table .fa-times-circle {
    color: #c00;
}

.responsive4-stacked-table.with-mobile-labels {
    font-size: .85em;
}

@media (max-width: 1199px) {
    .container {
        width: auto;
        padding: 0px;
    }
}

@media (max-width: 767px) {
    .responsive4-stacked-table thead {
        display: none;
    }
    .responsive4-stacked-table tr,
    .responsive4-stacked-table th,
    .responsive4-stacked-table td {
        display: block;
    }
    .responsive4-stacked-table td {
        border-top: none;
    }
    .responsive4-stacked-table tr td:first-child {
        border-top: 1px solid #ddd;
        font-weight: bold;
    }
    .responsive4-stacked-table.with-mobile-labels tr td:first-child {
        font-weight: 300;
    }
    .responsive4-stacked-table.with-mobile-labels td:before {
        display: block;
        font-weight: bold;
    }
    .responsive4-stacked-table.with-mobile-labels td:nth-of-type(1):before {
        content: "Model:";
    }
    .responsive4-stacked-table.with-mobile-labels td:nth-of-type(2):before {
        content: "Watts:";
    }
    .responsive4-stacked-table.with-mobile-labels td:nth-of-type(3):before {
        content: "Timer:";
    }
    .responsive4-stacked-table.with-mobile-labels td:nth-of-type(4):before {
        content: "Setting:";
    }
    .responsive4-stacked-table.with-mobile-labels td:nth-of-type(5):before {
        content: "Dimensions:";
    }
        .responsive4-stacked-table.with-mobile-labels td:nth-of-type(6):before {
        content: "Safety:";
    }
    .responsive4-stacked-table.with-mobile-labels td:nth-of-type(7):before {
        content: "Features:";
    }
        .responsive4-stacked-table.with-mobile-labels td:nth-of-type(8):before {
        content: "Check Price:";
    }

}



/* responsive beard trimmer */

.responsive5-stacked-table {
    width: 100%;
    border: 1px solid #ddd;
    border-collapse: collapse;
    table-layout: fixed;
}
.responsive5-stacked-table th,
.responsive5-stacked-table td {
    padding: 10px;
    border-top: 1px solid #ddd;
}
.responsive5-stacked-table thead {
    background: #eee;
    border-bottom: 3px solid #ddd;
}
.responsive5-stacked-table tr:nth-child(even) {
    background: #f5f5f5;
}
.responsive5-stacked-table .fa {
    margin-right: 5px;
}
.responsive5-stacked-table .fa-check-circle {
    color: #690;
}
.responsive5-stacked-table .fa-times-circle {
    color: #c00;
}

.responsive5-stacked-table.with-mobile-labels {
    font-size: .85em;
}

@media (max-width: 1199px) {
    .container {
        width: auto;
        padding: 0px;
    }
}

@media (max-width: 767px) {
    .responsive5-stacked-table thead {
        display: none;
    }
    .responsive5-stacked-table tr,
    .responsive5-stacked-table th,
    .responsive5-stacked-table td {
        display: block;
    }
    .responsive5-stacked-table td {
        border-top: none;
    }
    .responsive5-stacked-table tr td:first-child {
        border-top: 1px solid #ddd;
        font-weight: bold;
    }
    .responsive5-stacked-table.with-mobile-labels tr td:first-child {
        font-weight: 300;
    }
    .responsive5-stacked-table.with-mobile-labels td:before {
        display: block;
        font-weight: bold;
    }
    .responsive5-stacked-table.with-mobile-labels td:nth-of-type(1):before {
        content: "Model:";
    }
    .responsive5-stacked-table.with-mobile-labels td:nth-of-type(2):before {
        content: "Design:";
    }
    .responsive5-stacked-table.with-mobile-labels td:nth-of-type(3):before {
        content: "Power:";
    }
    .responsive5-stacked-table.with-mobile-labels td:nth-of-type(4):before {
        content: "Features:";
    }
    .responsive5-stacked-table.with-mobile-labels td:nth-of-type(5):before {
        content: "Waterproof:";
    }
    .responsive5-stacked-table.with-mobile-labels td:nth-of-type(6):before {
        content: "Run Time:";
    }
    .responsive5-stacked-table.with-mobile-labels td:nth-of-type(7):before {
        content: "Length Settings:";
    }
    .responsive5-stacked-table.with-mobile-labels td:nth-of-type(8):before {
        content: "Warranty:";
    }
    .responsive5-stacked-table.with-mobile-labels td:nth-of-type(9):before {
        content: "Check Price:";
    }

}




/* responsive steam cleaner */

.responsive6-stacked-table {
    width: 100%;
    border: 1px solid #ddd;
    border-collapse: collapse;
    table-layout: fixed;
}
.responsive6-stacked-table th,
.responsive6-stacked-table td {
    padding: 10px;
    border-top: 1px solid #ddd;
}
.responsive6-stacked-table thead {
    background: #eee;
    border-bottom: 3px solid #ddd;
}
.responsive6-stacked-table tr:nth-child(even) {
    background: #f5f5f5;
}
.responsive6-stacked-table .fa {
    margin-right: 5px;
}
.responsive6-stacked-table .fa-check-circle {
    color: #690;
}
.responsive6-stacked-table .fa-times-circle {
    color: #c00;
}

.responsive6-stacked-table.with-mobile-labels {
    font-size: .85em;
}

@media (max-width: 1199px) {
    .container {
        width: auto;
        padding: 0px;
    }
}

@media (max-width: 767px) {
    .responsive6-stacked-table thead {
        display: none;
    }
    .responsive6-stacked-table tr,
    .responsive6-stacked-table th,
    .responsive6-stacked-table td {
        display: block;
    }
    .responsive6-stacked-table td {
        border-top: none;
    }
    .responsive6-stacked-table tr td:first-child {
        border-top: 1px solid #ddd;
        font-weight: bold;
    }
    .responsive6-stacked-table.with-mobile-labels tr td:first-child {
        font-weight: 300;
    }
    .responsive6-stacked-table.with-mobile-labels td:before {
        display: block;
        font-weight: bold;
    }
    .responsive6-stacked-table.with-mobile-labels td:nth-of-type(1):before {
        content: "Model:";
    }
    .responsive6-stacked-table.with-mobile-labels td:nth-of-type(2):before {
        content: "Dimensions:";
    }
    .responsive6-stacked-table.with-mobile-labels td:nth-of-type(3):before {
        content: "Weight:";
    }
    .responsive6-stacked-table.with-mobile-labels td:nth-of-type(4):before {
        content: "Features:";
    }
    .responsive6-stacked-table.with-mobile-labels td:nth-of-type(5):before {
        content: "Maximum Reach:";
    }
    .responsive6-stacked-table.with-mobile-labels td:nth-of-type(6):before {
        content: "Water Tank Capacity:";
    }
    .responsive6-stacked-table.with-mobile-labels td:nth-of-type(7):before {
        content: "Power:";
    }
    .responsive6-stacked-table.with-mobile-labels td:nth-of-type(8):before {
        content: "Steam Pressure:";
    }
    .responsive6-stacked-table.with-mobile-labels td:nth-of-type(9):before {
        content: "Warranty:";
    }
    .responsive6-stacked-table.with-mobile-labels td:nth-of-type(10):before {
        content: "Check Price:";
    }

}


/* responsive hair trimmer */


.responsive8-stacked-table {
    width: 100%;
    border: 1px solid #ddd;
    border-collapse: collapse;
    table-layout: fixed;
}
.responsive8-stacked-table th,
.responsive8-stacked-table td {
    padding: 10px;
    border-top: 1px solid #ddd;
}
.responsive8-stacked-table thead {
    background: #eee;
    border-bottom: 3px solid #ddd;
}
.responsive8-stacked-table tr:nth-child(even) {
    background: #f5f5f5;
}
.responsive8-stacked-table .fa {
    margin-right: 5px;
}
.responsive8-stacked-table .fa-check-circle {
    color: #690;
}
.responsive8-stacked-table .fa-times-circle {
    color: #c00;
}

.responsive8-stacked-table.with-mobile-labels {
    font-size: 12px;
}

@media (max-width: 1199px) {
    .container {
        width: auto;
        padding: 0px;
    }
}

@media (max-width: 767px) {
    .responsive8-stacked-table thead {
        display: none;
    }
    .responsive8-stacked-table tr,
    .responsive8-stacked-table th,
    .responsive8-stacked-table td {
        display: block;
    }
    .responsive8-stacked-table td {
        border-top: none;
    }
    .responsive8-stacked-table tr td:first-child {
        border-top: 1px solid #ddd;
        font-weight: bold;
    }
    .responsive8-stacked-table.with-mobile-labels tr td:first-child {
        font-weight: 300;
    }
    .responsive8-stacked-table.with-mobile-labels td:before {
        display: block;
        font-weight: bold;
    }
    .responsive8-stacked-table.with-mobile-labels td:nth-of-type(1):before {
        content: "Model:";
    }
    .responsive8-stacked-table.with-mobile-labels td:nth-of-type(2):before {
        content: "Image:";
    }
    .responsive8-stacked-table.with-mobile-labels td:nth-of-type(3):before {
        content: "Design:";
    }
    .responsive8-stacked-table.with-mobile-labels td:nth-of-type(4):before {
        content: "Dimensions:";
    }
    .responsive8-stacked-table.with-mobile-labels td:nth-of-type(5):before {
        content: "Style:";
    }
    .responsive8-stacked-table.with-mobile-labels td:nth-of-type(6):before {
        content: "Read Full Review:";
    }
    .responsive8-stacked-table.with-mobile-labels td:nth-of-type(7):before {
        content: "Score:";
    }
        .responsive8-stacked-table.with-mobile-labels td:nth-of-type(8):before {
        content: "Check Price:";
    }
}



/* responsive electric toothbrush */


.responsive9-stacked-table {
    width: 100%;
    border: 1px solid #ddd;
    border-collapse: collapse;
    table-layout: fixed;
}
.responsive9-stacked-table th,
.responsive9-stacked-table td {
    padding: 10px;
    border-top: 1px solid #ddd;
}
.responsive9-stacked-table thead {
    background: #eee;
    border-bottom: 3px solid #ddd;
}
.responsive9-stacked-table tr:nth-child(even) {
    background: #f5f5f5;
}
.responsive9-stacked-table .fa {
    margin-right: 5px;
}
.responsive9-stacked-table .fa-check-circle {
    color: #690;
}
.responsive9-stacked-table .fa-times-circle {
    color: #c00;
}

.responsive9-stacked-table.with-mobile-labels {
    font-size: 12px;
}

@media (max-width: 1199px) {
    .container {
        width: auto;
        padding: 0px;
    }
}

@media (max-width: 767px) {
    .responsive9-stacked-table thead {
        display: none;
    }
    .responsive9-stacked-table tr,
    .responsive9-stacked-table th,
    .responsive9-stacked-table td {
        display: block;
    }
    .responsive9-stacked-table td {
        border-top: none;
    }
    .responsive9-stacked-table tr td:first-child {
        border-top: 1px solid #ddd;
        font-weight: bold;
    }
    .responsive9-stacked-table.with-mobile-labels tr td:first-child {
        font-weight: 300;
    }
    .responsive9-stacked-table.with-mobile-labels td:before {
        display: block;
        font-weight: bold;
    }
    .responsive9-stacked-table.with-mobile-labels td:nth-of-type(1):before {
        content: "Model:";
    }
    .responsive9-stacked-table.with-mobile-labels td:nth-of-type(2):before {
        content: "Image:";
    }
    .responsive9-stacked-table.with-mobile-labels td:nth-of-type(3):before {
        content: "Features:";
    }
    .responsive9-stacked-table.with-mobile-labels td:nth-of-type(4):before {
        content: "Brush Settings:";
    }
    .responsive9-stacked-table.with-mobile-labels td:nth-of-type(5):before {
        content: "Battery Life:";
    }
    .responsive9-stacked-table.with-mobile-labels td:nth-of-type(6):before {
        content: "Power:";
    }
    .responsive9-stacked-table.with-mobile-labels td:nth-of-type(7):before {
        content: "Warranty:";
    }
    .responsive9-stacked-table.with-mobile-labels td:nth-of-type(8):before {
        content: "Read Full Review:";
    }
    .responsive9-stacked-table.with-mobile-labels td:nth-of-type(9):before {
        content: "Score:";
    }
    .responsive9-stacked-table.with-mobile-labels td:nth-of-type(10):before {
        content: "Check Price:";
    }

}






/* responsive karaoke machine */


.responsivek1-stacked-table {
    width: 100%;
    border: 1px solid #ddd;
    border-collapse: collapse;
    table-layout: fixed;
}
.responsivek1-stacked-table th,
.responsivek1-stacked-table td {
    padding: 10px;
    border-top: 1px solid #ddd;
}
.responsivek1-stacked-table thead {
    background: #eee;
    border-bottom: 3px solid #ddd;
}
.responsivek1-stacked-table tr:nth-child(even) {
    background: #f5f5f5;
}
.responsivek1-stacked-table .fa {
    margin-right: 5px;
}
.responsivek1-stacked-table .fa-check-circle {
    color: #690;
}
.responsivek1-stacked-table .fa-times-circle {
    color: #c00;
}

.responsivek1-stacked-table.with-mobile-labels {
    font-size: 12px;
}

@media (max-width: 1199px) {
    .container {
        width: auto;
        padding: 0px;
    }
}

@media (max-width: 767px) {
    .responsivek1-stacked-table thead {
        display: none;
    }
    .responsivek1-stacked-table tr,
    .responsivek1-stacked-table th,
    .responsivek1-stacked-table td {
        display: block;
    }
    .responsivek1-stacked-table td {
        border-top: none;
    }
    .responsivek1-stacked-table tr td:first-child {
        border-top: 1px solid #ddd;
        font-weight: bold;
    }
    .responsivek1-stacked-table.with-mobile-labels tr td:first-child {
        font-weight: 300;
    }
    .responsivek1-stacked-table.with-mobile-labels td:before {
        display: block;
        font-weight: bold;
    }
    .responsivek1-stacked-table.with-mobile-labels td:nth-of-type(1):before {
        content: "Model:";
    }
    .responsivek1-stacked-table.with-mobile-labels td:nth-of-type(2):before {
        content: "Image:";
    }
    .responsivek1-stacked-table.with-mobile-labels td:nth-of-type(3):before {
        content: "Features:";
    }
    .responsivek1-stacked-table.with-mobile-labels td:nth-of-type(4):before {
        content: "Brush Settings:";
    }
    .responsivek1-stacked-table.with-mobile-labels td:nth-of-type(5):before {
        content: "Battery Life:";
    }
    .responsivek1-stacked-table.with-mobile-labels td:nth-of-type(6):before {
        content: "Power:";
    }
    .responsivek1-stacked-table.with-mobile-labels td:nth-of-type(7):before {
        content: "Warranty:";
    }
    .responsivek1-stacked-table.with-mobile-labels td:nth-of-type(8):before {
        content: "Read Full Review:";
    }
    .responsivek1-stacked-table.with-mobile-labels td:nth-of-type(9):before {
        content: "Score:";
    }
    .responsivek1-stacked-table.with-mobile-labels td:nth-of-type(10):before {
        content: "Check Price:";
    }

}


/* responsive bricklaying trowel */


.responsiveblt-stacked-table {
    width: 100%;
    border: 1px solid #ddd;
    border-collapse: collapse;
    table-layout: fixed;
}
.responsiveblt-stacked-table th,
.responsiveblt-stacked-table td {
    padding: 10px;
    border-top: 1px solid #ddd;
}
.responsiveblt-stacked-table thead {
    background: #eee;
    border-bottom: 3px solid #ddd;
}
.responsiveblt-stacked-table tr:nth-child(even) {
    background: #f5f5f5;
}
.responsiveblt-stacked-table .fa {
    margin-right: 5px;
}
.responsiveblt-stacked-table .fa-check-circle {
    color: #690;
}
.responsiveblt-stacked-table .fa-times-circle {
    color: #c00;
}

.responsiveblt-stacked-table.with-mobile-labels {
    font-size: 12px;
}

@media (max-width: 1199px) {
    .container {
        width: auto;
        padding: 0px;
    }
}

@media (max-width: 767px) {
    .responsiveblt-stacked-table thead {
        display: none;
    }
    .responsiveblt-stacked-table tr,
    .responsiveblt-stacked-table th,
    .responsiveblt-stacked-table td {
        display: block;
    }
    .responsiveblt-stacked-table td {
        border-top: none;
    }
    .responsiveblt-stacked-table tr td:first-child {
        border-top: 1px solid #ddd;
        font-weight: bold;
    }
    .responsiveblt-stacked-table.with-mobile-labels tr td:first-child {
        font-weight: 300;
    }
    .responsiveblt-stacked-table.with-mobile-labels td:before {
        display: block;
        font-weight: bold;
    }
    .responsiveblt-stacked-table.with-mobile-labels td:nth-of-type(1):before {
        content: "Model:";
    }
    .responsiveblt-stacked-table.with-mobile-labels td:nth-of-type(2):before {
        content: "Image:";
    }
    .responsiveblt-stacked-table.with-mobile-labels td:nth-of-type(3):before {
        content: "Length:";
    }
    .responsiveblt-stacked-table.with-mobile-labels td:nth-of-type(4):before {
        content: "Blade:";
    }
    .responsiveblt-stacked-table.with-mobile-labels td:nth-of-type(5):before {
        content: "Handle:";
    }
    .responsiveblt-stacked-table.with-mobile-labels td:nth-of-type(6):before {
        content: "Parts:";
    }
    .responsiveblt-stacked-table.with-mobile-labels td:nth-of-type(7):before {
        content: "Design:";
    }
    .responsiveblt-stacked-table.with-mobile-labels td:nth-of-type(8):before {
        content: "Read Full Review:";
    }
    .responsiveblt-stacked-table.with-mobile-labels td:nth-of-type(9):before {
        content: "Score:";
    }
    .responsiveblt-stacked-table.with-mobile-labels td:nth-of-type(10):before {
        content: "Check Price:";
    }

Answer 1

正如其他人所说，您的 sn-p 不起作用，并且我们缺少 HTML，但我相信我理解您的意思，所以这里有一个解决方案，您可以使用它来大大简化您的 CSS：不要将 content 属性的确切文本放在 CSS 中，而是使用属性引用。 data attribute 非常适合此目的，因为它可以让我们存储随机文本。

您可以像这样在表格的 HTML 中指定内容：

<td data-text="Your mobile content here">Lorem ipsum</td>

这样，您只需设置一次 CSS 就忘记它，而将内容留给 HTML 应有的位置。

简单示例：

html {
  height: 100%;
  background-color: #D6DBDF;
}
body {
  padding: 40px;
}
table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border: 1px solid #5d6d7e;;
}
thead {
  text-align: center;
  font-size: 1.4em;
  background-color: #4682B4;
  color: #edeff1;
}
tbody {
  background-color: #edeff1;
}
tr {
  border-top: 1px solid #5d6d7e;
}
td {
  height: 50px;
  padding: 10px;
  box-sizing: border-box;
}
td:not(:last-child) {
  border-right: 1px solid #5d6d7e;
}
@media all and (max-width: 600px) {
  table * {
    display: block;
  }
  thead {
    display: none;
  }
  td::before {
    display: block;
    content: attr(data);
    padding: 5px 0;
	font-weight: bold;
  }
  td {
    border-right: none !important;
	height: auto;
	border-top: none;
  }
  tr {
    border-top: 1px solid #5d6d7e;
  }
  tr:nth-child(even) .td {
    background-color: #99a3a4;
    color: white;
  }
  tr:nth-child(even) td {
	background-color: #4682B4;
  }
}

<h1 class="page-title">Best Bananas</h1>

<table>
	<thead>
		<tr>
			<th data="Not shown in mobile">Model</th>
			<th data="Not shown in mobile">Image</th>
			<th data="Not shown in mobile">Colour</th>
			<th data="Not shown in mobile">Length</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td data="Model:">Big Bananas</td>
			<td data="Image:">Not available</td>
			<td data="Colour:">4GB</td>
			<td data="Length:">128GB Flash storage</td>
		</tr>
		<tr>
			<td data="Model:">Long Bananas</td>
			<td data="Image:">Not available</td>
			<td data="Colour:">4GB</td>
			<td data="Length:">128GB Flash storage</td>
		</tr>
		<tr>
			<td data="Model:">Small Bananas</td>
			<td data="Image:">2.6Ghz dual-core Intel Core i5</td>
			<td data="Colour:">8GB</td>
			<td data="Length:">128GB Flash storage</td>
		</tr>
		<tr>
			<td data="Model:">Bunch of Bananas</td>
			<td data="Image:">2GHz quad-core Intel Core i7</td>
			<td data="Colour:">16GB</td>
			<td data="Length:">256GB Flash storage</td>
		</tr>
	</tbody>
</table>