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

Question

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

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

如您所见，我所做的只是向单个 td(第二行中的第一个 td)添加左填充，但出于某种原因，当我这样做时，它为第一个 td 的第二个 td 添加了一个左填充第三排也是如此。怎么会？我想要它，以便只有第二行中的第一个 td 获得左侧填充，而表格的其余部分保持不变。

注意:我在 Chrome 和 IE 8 - IE 10 上对此进行了测试。

Answer 1

您问题中的代码，可以使用:http://jsfiddle.net/We5QF/

如果您希望第一行和第三行(在第 1 列中)的宽度与第二行的宽度不同，您必须按照此处的建议做一些棘手的事情:html table cell width for different rows

如果您要在同一列中使用不同的宽度，您可能想尝试使用 div 而不是表格。像这样: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;
}