html - 如何进行以下更改(表格元素样式)

Question

在我的移动应用程序中，我有一条收件箱消息，它是表格格式的:

Fiddle example

HTML:

      <div>
        <table>
            <tbody>
                <tr>
                    <td class="td1">
                        <img src="images/inbox_read.png" class="icon">
                    </td>
                    <td class="td2"><span>You have received a message</span>

                    </td>
                    <td class="td3"><span class="date">13/2/2014  20:02:01</span>

                    </td>
                </tr>
            </tbody>
        </table>
        <div class="seperator-gradient"></div>
    </div>
    <div>
        <table>
            <tbody>
                <tr>
                    <td class="td1">
                        <img src="images/inbox_read.png" class="icon">
                    </td>
                    <td class="td2"><span>You have received a message</span>

                    </td>
                    <td class="td3"><span class="date">13/2/2014  20:02:01</span>

                    </td>
                </tr>
            </tbody>
        </table>
        <div class="seperator-gradient"></div>
    </div>
    <div>
        <table>
            <tbody>
                <tr>
                    <td class="td1">
                        <img src="images/inbox_read.png" class="icon">
                    </td>
                    <td class="td2"><span>You have received a message</span>

                    </td>
                    <td class="td3"><span class="date">13/2/2014  20:02:01</span>

                    </td>
                </tr>
            </tbody>
        </table>
        <div class="seperator-gradient"></div>
    </div>

CSS:

            TABLE {
                width: 100%;
                text-align: left;
                padding: 6px 10px 10px;
            }
            TABLE .td1 {
                width: 30px;
            }
            TABLE .td2 {
                width: 154px;
            }
            TABLE .td3 {
                text-align: right;
                background-image: url("../images/more_arrow.png");
                background-position: 100% 10px;
                background-repeat: no-repeat;
                background-size: 10px 15px;
                width: 110px;
            }
            TABLE .sicon {
                height: 10px;
                width: 10px;
            }
            .date {
                color: #2aa8dc;
                float: right;
                position: relative;
                top: -8px;
                font-size: 12px;
                text-transform: uppercase;
            }
            .seperator-gradient {
                width: 100%;
                height: 1px;
                border-bottom: background: #c4c4c4;
                /* Old browsers */
                background: -moz-linear-gradient(left, #ffffff 0%, #e3e3e3 10%, #b8b8b8 50%, #e3e3e3 90%, #fcfcfc 100%);
                /* FF3.6+ */
                background: -webkit-gradient(linear, left top, right top, color-stop(0%, #ffffff), color-stop(10%, #e3e3e3), color-stop(50%, #b8b8b8), color-stop(90%, #e3e3e3), color-stop(100%, #fcfcfc));
                /* Chrome,Safari4+ */
                background: -webkit-linear-gradient(left, #ffffff 0%, #e3e3e3 10%, #b8b8b8 50%, #e3e3e3 90%, #fcfcfc 100%);
                /* Chrome10+,Safari5.1+ */
                background: -o-linear-gradient(left, #ffffff 0%, #e3e3e3 10%, #b8b8b8 50%, #e3e3e3 90%, #fcfcfc 100%);
                /* Opera 11.10+ */
                background: -ms-linear-gradient(left, #ffffff 0%, #e3e3e3 10%, #b8b8b8 50%, #e3e3e3 90%, #fcfcfc 100%);
                /* IE10+ */
                background: linear-gradient(to right, #ffffff 0%, #e3e3e3 10%, #b8b8b8 50%, #e3e3e3 90%, #fcfcfc 100%);
                /* W3C */
                filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#fcfcfc', GradientType=1);
                /* IE6-9 */
            }

您可以缩小浏览器的大小，使其与手机一样宽。然后:

我想让第二个 td 的消息不要在手机宽度(320px)上换行，如何在不改变表格结构的情况下实现这一点:

<td class="td2"><span>You have received a message</span>

 </td>

保持所有表格宽度，即使超过 td2 和 td3 之间的边界，也只需让消息显示在一行中......这可能吗？

Answer 1

所以你想要它被切断？重叠日期/时间？什么？

TABLE 在你的 CSS 中应该是小写的；

而且我不相信 width 在 `display: table-cell; 的元素(例如 td)上工作得很好；

所以

改变:

.td2 {
    width: 154px;
}

到

.td2 span {
    display: block;
    background-color: green; /* used for demonstration purposes */
    width: 200px;/* 154px isn't enough */
}