Table Formatting in Blogger

I'm pretty new to Blogger but one of the first snags I hit was with formatting tables due to the way Blogger automatically inserts line breaks. You can disable that behavior under Settings but it's a global option so it affects all posts. Another option is to write your tables without line breaks, but that's a maintenance problem.

Here's another approach that works (tested with Firefox 1.5 and IE 6; anyone have other browser results?). At the top of your post add this:

<style type="text/css">.nobr br { display: none }</style>

Then place your table within that class:

<div class="nobr">
<table border="1">
  <tr>
    <td>GOOG</td>
    <td>505.00</td>
    <td>2006-01-12</td>
  </tr>
  <tr>
    <td>BRK-A</td>
    <td>110,000.00</td>
    <td>2006-01-12</td>
  </tr>
</table>
</div>

That has the effect of turning off the display of the Blogger-generated line breaks within the div, causing the table to be rendered properly.

Here's how that table looks in your browser:

GOOG	505.00	2006-01-12
BRK-A	110,000.00	2006-01-12

I think it should be possible to move the CSS declaration into the template so you don't have to repeat it in each post.

Note from reader S.B.:

Unfortunately, both the "Compose" and "Preview" views of a post still render incorrectly, but when you actually publish, the table does come out right!