CSS - Adding padding to one td changes padding on all the other rows

Question

This is my HTML:

<table class='htmlCommentTable'>

    <tr>
        <td class='thirdtd'>
            <img class='clickedFlame' src="image.png" />
        </td>

        <td class='secondtd'>
            name <br /> first comment
        </td>
    </tr>

    <tr>
        <td class='thirdtd' style="padding-left:80px"> <!-- NOTE: I added a left padding to this single td -->
            <img class='clickedFlame' src="image.png"  />       
        </td>

        <td class='secondtd'>
            name <br /> second comment
        </td>
    </tr>

    <tr>
        <td class='thirdtd'>
            <img class='clickedFlame' src="image.png" />
        </td>

        <td class='secondtd'>
            name <br /> third comment
        </td>
    </tr>

</table>

and this is my CSS:

.htmlCommentTable td {
    border-collapse: seperate;
    vertical-align: top;
    padding: 10px;
    border: 1px solid black;
    margin: 0;
}

.thirdtd {
    width: 90px;
}

.secondtd {
    width: 100%;
    position: relative;
}

As you can see, all I did was add a left padding to a single td (the first td in the second row) but for some reason when I do this, it gives a left padding to the second td's of the first and third row as well. How come? I want it so that only the first td in the second row gets the left padding and the rest of the table remains the same.

Note: I tested this fir Chrome and IE 8 - IE 10.

Answer 1

The code from your question, to play with: http://jsfiddle.net/We5QF/

If you want the width of the first and third rows (in column 1) to be different than the second row, you'll have to do something tricky as suggested here: html table cell width for different rows

You may want to try using divs instead of a table if you're going after different widths in the same column. Something like this: http://jsfiddle.net/4ZB85/2/

HTML

<div class="htmlCommentTable">

    <div class="row">
        <div class="col1">
            <img class="clickedFlame" src="image.png" />
        </div>

        <div class="col2">
            name <br /> first comment
        </div>
    </div>

    <div class="row">
        <div class="col1 extraspace">
            <img class="clickedFlame" src="image.png" />
        </div>

        <div class="col2">
            name <br /> second comment
        </div>
    </div>

    <div class="row">
        <div class="col1">
            <img class="clickedFlame" src="image.png" />
        </div>

        <div class="col2">
            name <br /> third comment
        </div>
    </div>

</div>

CSS

div.htmlCommentTable {
    width: 100%;
}

div.row {
    width: 100%;
    margin-bottom: 20px;
    border: 1px solid #000;
    clear: both;
}

div.col1 {
   margin: 0;
   padding: 10px;
   display: inline-block;
   vertical-align: top;
   background-color: #efefef;
}

div.col2 {
   display: inline-block;
   vertical-align: top;
   padding: 10px;
   background-color: #dedede;
   border-left: 1px solid blue;
}

div.extraspace {
    padding-left: 90px;
}