Question

My background color applied to a tr doesn’t extend the full width of the table when there is one less td in the row. I googeled this and I thought that border-collapse: collapse; should fix this but its not working for me. Thanks

    <table>
    <tr class="tr1">
      <td>1</td>
      <td>2</td>
    </tr>
    <tr class="tr2">
      <td>3</td>
    </tr>    
    </table>​

    .tr1 {
        background-color: gold;
    }
    .tr2 {
        background-color: blue;
    }
    td {
        border: none;
        width: 50px;
    }
    table { 
        border-collapse: collapse; 
    }​

http://jsfiddle.net/V3xm8/5/

Answer 1

You can add a colspan to the <td>

<td colspan="2">

DEMO

or add a blank <td>

<td>3</td><td></td>

I prefer to use the first method, but some “table generators” use the latter.