how to make following changes ( table element styling) - html

Question

In my mobile application, I have a in-box message and it's in table format:
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 */
}
You can shrink your browser size to make it phone's width. Then:
I'd like to make the second td's message not to break to a newline on phone's width(320px), how to achieve this without changing the table's structure:
<td class="td2"><span>You have received a message</span>
</td>
keep all the table width, just make the message show in one line even it exceeds boundary between td2 and td3...is it possible?

Answer 1

So you want it to be cut off? Overlap the date/time? What?
TABLE in your CSS should be lowercase;
and I do not believe width works well on elements (e.g. td's) that are `display: table-cell;
SO
Change:
.td2 {
width: 154px;
}
TO
.td2 span {
display: block;
background-color: green; /* used for demonstration purposes */
width: 200px;/* 154px isn't enough */
}