html - :before content breaking out of table cell

Question

我正在为我公司的网站整理一张表格，比较不同类型的 AED 及其费用。我关注了this tutorial使其移动友好。原理是它使单元格像 div 一样堆叠在一起，同时使用 :before 插入与该数据关联的相应标题。

我看到的问题是，这不适用于多行标题；他们冲出牢房，撞上了那个(些): example image of the titles breaking out

右边的破折号是原始的td数据，左边的标题插入了:before {content: "";}

关于如何让单元格扩展有什么建议吗？我意识到这可能涉及采用一种全新的方法来使表格响应，所以我愿意改变。

完整代码:

<style>
table {
    width: 100%;
    border-collapse: collapse;
}
/* Zebra Striping */
tr:nth-of-type(even) {
    background-color: #f0f0f0;
}
th {
    background-color: #333;
    color: white;
    font-weight: bold;
}
td, th {
    padding: 2px !important;
    border: 1px solid #ccc;
    text-align: center;
}
#aed-comparison img {
    height: 60px;
}
thead, tbody, th, td, tr {
    vertical-align: middle;
}
#zoll {
    background-color: #ccffcc;
}

/* Hover roles */
tr:hover {
    background-color: #e9e9e9;
}
#aed-images:hover {
    background-color: white;
}


@media only screen and (max-width: 1048px) {
    /* Alter the zebra striping */
    tr:nth-of-type(even) {
        background-color: inherit;
    }
    td:nth-of-type(even) {
        background-color: #f0f0f0;
    }
    /* Alter hover roles */
    tr:hover {
        background-color: inherit;
    }
    td:hover {
        background-color: #e6e6e6;
    }

    /* Force table to not behave like a table */
    table, thead, tbody, th, td, tr {
        display: block;
        vertical-align: -50%;
    }

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

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

    table {
        table-layout: fixed;
    }
    table td {
        word-wrap:break-word;
    }

    /* Labeling the data */
    td:nth-of-type(1):before {content: "ZOLL AED Plus";}
    td:nth-of-type(2):before {content: "Cardiac Science Powerheart G5";}
    td:nth-of-type(3):before {content: "Cardiac Science Powerheart G3";}
    td:nth-of-type(4):before {content: "Philips HeartStart OnSite & Home";}
    td:nth-of-type(5):before {content: "Defibtech View";}
    td:nth-of-type(6):before {content: "Philips HeartStart FRx";}
    td:nth-of-type(7):before {content: "Physio-Control LIFEPAK CR Plus & EXPRESS";}
    td:nth-of-type(8):before {content: "HeartSine Samaritan PAD 350 & 450";}
    td:nth-of-type(9):before {content: "Defibtech LIFELINE";}

}
</style>
<h2>The AED Plus Total Cost of ownership (TCO) Advantage for FIVE Years</h2>
<table id="aed-comparison">
<thead>
<tr> <!-- Titles -->
    <th>Year*</th>
    <th>ZOLL AED Plus</th>
    <th>Cardiac Science Powerheart G5</th>
    <th>Cardiac Science Powerheart G3</th>
    <th>Philips HeartStart OnSite &amp; Home</th>
    <th>Defibtech View</th>
    <th>Philips HeartStart FRx</th>
    <th>Physio-Control LIFEPAK CR Plus &amp; EXPRESS</th>
    <th>HeartSine Samaritan PAD 350 &amp; 450</th>
    <th>Defibtech LIFELINE</th>
</tr>
</thead>
<tr id="aed-images"> <!-- Images -->
   <th></th>
   <td><img src="https://www.cpr-savers.com/assets/images/zollimage-crop.jpg" href="https://www.cpr-savers.com/ZOLL-AED-Plus_p_6646.html" /></td>
   <td><img src="https://www.cpr-savers.com/assets/images/g5.jpg" href="https://www.cpr-savers.com/Cardiac-Science-Powerheart-G5-AED_p_10636.html" /></td>
   <td><img src="https://www.cpr-savers.com/assets/images/g3-pro1-crop.jpg" href="https://www.cpr-savers.com/Cardiac-Science-Powerheart-G3-Plus-AED_p_6913.html" /></td>
   <td><img src="https://www.cpr-savers.com/assets/images/prodimages/M5066A.jpg" href="https://www.cpr-savers.com/Philips-HeartStart-OnSite-AED_p_7687.html" /></td>
   <td><img src="https://www.cpr-savers.com/assets/images/DCF-A2310EN-crop.jpg" href="https://www.cpr-savers.com/Defibtech-Lifeline-VIEW-AED_p_3893.html" /></td>
   <td><img src="https://www.cpr-savers.com/assets/images/prodimages/861304_t.jpg" href="https://www.cpr-savers.com/Philips-HeartStart-FRx-AED--Re-Certified_p_10461.html" /></td>
   <td><img src="https://www.cpr-savers.com/assets/images/80403-000149.jpg" href="https://www.cpr-savers.com/Physio-Control-LIFEPAK-CR-Plus-AED_p_4644.html" /></td>
   <td><img src="https://www.cpr-savers.com/assets/images/350-bac-us-10_thumbnail.jpg" href="https://www.cpr-savers.com/HeartSine-Samaritan-PAD-450P-AED_p_10593.html" /></td>
   <td><img src="https://www.cpr-savers.com/assets/images/prodimages/DCF-A100-EN_t.jpg" href="https://www.cpr-savers.com/Defibtech-Lifeline-AED_p_3890.html" /></td>
</tr>
<tr> <!-- YEAR 1 -->
   <th>Year 1</th>
   <td id="zoll">--</td>
   <td>--</td>
   <td>--</td>
   <td>--</td>
   <td>--</td>
   <td>--</td>
   <td>--</td>
   <td>--</td>
   <td>--</td>
</tr>
<tr> <!-- YEAR 2 -->
   <th>Year 2</th>
   <td id="zoll">--</td>
   <td>--</td>
   <td>--</td>
   <td>--</td>
   <td>--</td>
   <td>--</td>
   <td>--</td>
   <td>--</td>
   <td>9V Battery: $7</td>
</tr>
<tr>
   <th>Year 3</th>
   <td id="zoll">--</td>
   <td>Pads: $69</td>
   <td>Pads: $46</td>
   <td>Pads: $67</td>
   <td>Pads: $59</td>
   <td>Pads: $56</td>
   <td>Pads &amp; Charge Pack: $100</td>
   <td>--</td>
   <td>9V Battery: $7<br/>Pads: $38</td>
</tr>
<tr> <!-- YEAR 4 -->
   <th>Year 4</th>
   <td id="zoll">--</td>
   <td>--</td>
   <td>--</td>
   <td>--</td>
   <td>--</td>
   <td>--</td>
   <td>--</td>
   <td>Padpak (battery &amp; pads): $175</td>
   <td>9V Battery: $7</td>
</tr>
<tr> <!-- YEAR 5 -->
   <th>Year 5</th>
   <td id="zoll">--</td>
   <td>Pads: $69<br />Battery: $395</td>
   <td>Pads: $46<br />Battery: $395</td>
   <td>Pads: $67<br />Battery: $169</td>
   <td>Pads: $59<br />Battery: $169</td>
   <td>Pads: $56<br />Battery: $167</td>
   <td>Pads &amp; Charge Pack: $100</td>
   <td>--</td>
   <td>9V Battery: $7<br />Pads: $38</td>
</tr>
<tr style="font-weight: bold;"> <!-- TOTAL COST -->
   <th>Total Cost</th>
   <td id="zoll">$0</td>
   <td>$533</td>
   <td>$487</td>
   <td>$303</td>
   <td>$287</td>
   <td>$279</td>
   <td>$200</td>
   <td>$175</td>
   <td>$104</td>
</tr>
<tr style="font-weight: bold;"> <!-- CHANGES REQUIRED -->
   <th>Changes Required</th>
   <td id="zoll">0</td>
   <td>3</td>
   <td>3</td>
   <td>3</td>
   <td>3</td>
       <td>3</td>
       <td>4</td>
       <td>1</td>
       <td>6</td>
   </tr>
</table>

Answer 1

尝试替换以下 css:

table td {
    word-wrap:break-word;
}

与:

table td {
    word-wrap:break-word;
    min-height: 60px;
}

这应该适合你。