How to make <td> responsive - responsive-design

Question

I am doing responsive mail and I need to make responsive td in table (without class or using media-query).
Simply - I need on small devices rank the td under them.
<table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="fff" style="width:100%; background-color: #fff; max-width:600px;">
<tr>
<td><img src="pic" /></td>
<td><a href="https://blahblah2.com/><img src="pic" /></a></td>
<td><a href="http://www.blahblah3.com/><img src="pic" /></a></td>
<td><a href="http://www.blahblah4.com/><img src="pic" /></a></td>
</tr>
</table>

Answer 1

You can try display:inline-block for every column in your table. It will make the columns shift below each column when width of the screen decreases.
As you have mentioned that you don't need class so m writing the inline style for each column. Try this code :
<table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="fff" style="width: 100%;
background-color: #fff; max-width: 600px;">
<tr>
<td style="display: inline-block; padding: 5px;">
<p>
hellohello</p>
</td>
<td style="display: inline-block; padding: 5px;">
<p>
hellohello</p>
</td>
<td style="display: inline-block; padding: 5px;">
<p>
hellohello</p>
</td>
<td style="display: inline-block; padding: 5px;">
<p>
hellohello</p>
</td>
</tr>
</table>
Fiddle here

Answer 2

You can create a media query to force all the td elements to drop below each other at a certain screen width. This ensures they all become vertical-aligned at the same time. It also preserves the table's horizontal-aligned print format if you are generating a report for printing.
#media only screen and (min-width: 0px) and (max-width: 700px) {
td {
display:inline-block;
padding:5px;
width:100%;
}
}