CSS clear:both not working for table cell with a background image?

CSS clear:both not working for table cell with a background image?

I'm developing an email and would like an image to show up only on a
mobile device.... SO I created an empty with a span inside, and styled the
span to have a background image.
The problem is, I'd like the image to take up a whole row, instead of
being right next to the headline. I tried clear:both and display:block but
I'm not sure why it's not working. I also tried setting the width to 100%
but that just throws everything off... any suggestions?
http://jsfiddle.net/pEDSn/
<table id="headline_body_copy_top" width="532" border="0" cellspacing="0"
cellpadding="0">
Ficaborio vellandebis arum inus es ema gimus, quibus vent.
.test {
width: 41px;
height: 41px;
background-image: url('http://placehold.it/41x41');
background-repeat: no-repeat;
background-size: 41px 41px;
display: block;
clear: both !important;
}