2

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

4

1 回答 1

0

您问题中的代码，可以使用：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;
}
于 2014-07-08T23:50:31.747 回答