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

【问题标题】：CSS - Adding padding to one td changes padding on all the other rowsCSS - 向一个 td 添加填充会更改所有其他行的填充
【发布时间】：2014-08-29 20:26:13
【问题描述】：

这是我的 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 获得左侧填充，而表格的其余部分保持不变。

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

【问题讨论】：

表的列应该是这样的。如果在一行中扩大或缩小一个单元格，另一行对应的单元格也会发生变化。这是为了让它们彼此保持一致。

标签： html css html-table padding cellpadding

【解决方案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;
}

【讨论】：