Question

我使用了responsive table solution found here。

我添加了word-wrap: break-word，但它不适用于下表：

HTML：

<div id="content">
<table>
<tbody>
<tr>
<td><strong>MTP 1: Acute Symptomatic</strong></td>
<td><strong>MTP 2: Acute and Chronic Symptomatic</strong></td>
</tr>
<tr>
<td>1 x 60 minutes session weekly for 6 weeks at <span style="color: #ff0000;">$420</span> &nbsp;&nbsp;<span style="color: #ff00ff;">save $60</span></td>
<td>Fortnightly 1 x 60 minutes session for 11 weeks at <span style="color: #ff0000;">$450</span> &nbsp;&nbsp;<span style="color: #ff00ff;">save $30</span></td>
</tr>
<tr>
<td>1 x 90 minutes session weekly for 6 weeks at&nbsp;<span style="color: #ff0000;">$630</span> &nbsp;&nbsp;<span style="color: #ff00ff;">save $60</span></td>
<td>Fortnightly 1 x 90 minutes session for 11 weeks at <span style="color: #ff0000;">$660</span> &nbsp;&nbsp;<span style="color: #ff00ff;">save $30</span></td>
</tr>
</tbody>
</table>
</div>

CSS：

#content table tbody {border-top: 1px solid #ccc;}
#content table tr:nth-of-type(odd) {
    background: #eee;
}
#content tr td {
    line-height: 1.5em;
}
@media only screen and (max-width: 500px) {
  #content td:nth-of-type(1):before { content: "MTP 1: Acute Symptomatic"; word-wrap: break-word;}
  #content td:nth-of-type(2):before { content: "MTP 2: Acute and Chronic Symptomatic"; word-wrap: break-word;}

    #content table tr:nth-of-type(odd) {
        background: transparent;
    }

    /* Force table to not be like tables anymore */
    #content table, #content thead, #content tbody, #content th, #content td, #content tr { 
        display: block; 
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    #content thead tr, #content tr:nth-of-type(1) { 
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    #content tr { border: 1px solid #ccc; }

    #content td { 
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        padding-left: 50%; 
        width: 50%;
        max-width: 50%;
        min-height: 39px;
        line-height: 1.5em;
    }
    #content #post-4818 td:nth-of-type(1) {
        background-color: #FFC384;
    }

    #content 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;
    }  
}

帮助表示赞赏。

Answer 1

将此chmod u+x list_globals.sh替换为此css -

#content td:before

然后添加此css -

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

最后将.wrapword{ white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ white-space: pre-wrap; /* css-3 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ white-space: -webkit-pre-wrap; /* Newer versions of Chrome/Safari*/ white-space: normal; }课程添加到您的wrapword，就像这样 -

tbody

此处jsfiddle

Answer 2

在我看来，您唯一需要做的就是从此规则中移除white-space: nowrap;

Updated fiddle

#content 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;          commented out    */
}

CSS {word-wrap：break-word}赢得了以下工作：选择器之前

2 个答案: