在我的移动应用程序中,我有一条收件箱消息,它是表格格式的:
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 之间的边界,也只需让消息显示在一行中......这可能吗?
最佳答案
所以你想要它被切断?重叠日期/时间?什么?
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 */
}
关于html - 如何进行以下更改(表格元素样式),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21896123/