Html CSS-向一个td添加填充将更改所有其他行的填充

这是我的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>

正如您所看到的，我所做的只是在一个td（第二行的第一个td）中添加一个左填充，但出于某种原因，当我这样做时，它也会在第一行和第三行的第二个td中添加一个左填充。怎么会？我希望这样，只有第二行中的第一个td得到左边的填充，而表的其余部分保持不变

---

注意：我测试了这个fir-Chrome和IE 8-IE 10。

您问题中的代码，用于：

如果希望第一行和第三行（第1列）的宽度不同于第二行，则必须按照此处的建议进行一些操作：

如果要在同一列中使用不同的宽度，可能需要尝试使用div而不是表。大概是这样的：

HTML

---

表的列应该是这样的。如果展开或收缩一行中的单元格，则另一行对应的单元格也将发生更改。这是为了让他们保持一致。

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

.thirdtd {
    width: 90px;
}

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

<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>

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;
}