如何进行以下更改（表格元素样式）

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

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

你的CSS中的

TABLE应该是小写的;

我不相信width适用于`display：table-cell;

的元素（例如td）

<强> SO

变化：

.td2 {
    width: 154px;
}

以

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