如何在行跨度td之后输入边距

Question

我一直在尝试实现一些非常简单的事情，如下所示，在我的代码中，您可以看到，td我设置了rowspan="2"并放置了一个input "id = image"。我正在尝试将图像放在input字段下方。

<style>
    table tr {
        border-bottom: 1px dotted #E8E8E8;
    }
    table tr td {
        padding-top: 6px;
        padding-bottom: 6px;
    }
    .image{
        margin:0;
        padding:0;
    }
    .image-input{
        margin:0;
        padding:0;
    }
</style>
<table style="width:400px;">
    <tbody>
        <tr>
            <td>Category</td>
            <td><input type="text" id="CId"></td>
            <td>Contries </td>
            <td><input type="text" id="Contries"></td>
        </tr>
        <tr>
            <td>Name</td>
            <td><input type="text"></td>
            <td class="image">image</td>
            <td rowspan="2"><input class="image-input" type="text">
                <img style="width:100px;" src="https://www.gravatar.com/avatar/80bfb4acb1a216227bc46762c3415862?s=64&d=identicon&r=PG&f=1" />
            </td>
        </tr>
        <tr>
            <td>Branch</td>
            <td><input type="text" id="Brand"></td>
            <td></td>
            <td style="display: none;"></td>
        </tr>
        <tr>
            <td>Product</td>
            <td><input type="text"></td>
            <td></td>
            <td style="display: none;"></td>
        </tr>
    </tbody>
</table>

Answer 1

您可以考虑在.image-input之后使用换行符<br>。给它一些底部边距，它非常适合。

<style>
    table tr {
        border-bottom: 1px dotted #E8E8E8;
    }
    table tr td {
        padding-top: 6px;
        padding-bottom: 6px;
    }
    .image{
        margin:0;
        padding:0;
    }
    .image-input{
        margin:0;
        margin-bottom: 2px; // or whatever your heart desires
        padding:0;
    }
</style>
<table>
    <tbody>
        <tr>
            <td>Category</td>
            <td><input type="text" id="CId"></td>
            <td>Contries </td>
            <td><input type="text" id="Contries"></td>
        </tr>
        <tr>
            <td>Name</td>
            <td><input type="text"></td>
            <td class="image">image</td>
            <td rowspan="2"><input class="image-input" type="text"> <br>
                <img src="/" />
            </td>
        </tr>
        <tr>
            <td>Branch</td>
            <td><input type="text" id="Brand"></td>
            <td></td>
            <td style="display: none;"></td>
        </tr>
        <tr>
            <td>Product</td>
            <td><input type="text"></td>
            <td></td>
            <td style="display: none;"></td>
        </tr>
    </tbody>
</table>

Answer 2

您可以通过将

图像浮动到左侧，并使用与输入字段高度相同的负边距（默认情况下16px）来实现相同的效果：

.image-input {
  margin-top: -16px;
  float: left;
}

这可以从下面看出：

table tr {
  border-bottom: 1px dotted #E8E8E8;
}
table tr td {
  padding-top: 6px;
  padding-bottom: 6px;
}
.image {
  margin: 0;
  padding: 0;
}
.image-input {
  margin: 0;
  padding: 0;
  margin-top: -16px;
  float: left;
}

<table>
  <tbody>
    <tr>
      <td>Category</td>
      <td><input type="text" id="CId"></td>
      <td>Contries </td>
      <td><input type="text" id="Contries"></td>
    </tr>
    <tr>
      <td>Name</td>
      <td><input type="text"></td>
      <td class="image">image</td>
      <td rowspan="2"><input class="image-input" type="text">
        <img src="/" />
      </td>
    </tr>
    <tr>
      <td>Branch</td>
      <td><input type="text" id="Brand"></td>
      <td></td>
      <td style="display: none;"></td>
    </tr>
    <tr>
      <td>Product</td>
      <td><input type="text"></td>
      <td></td>
      <td style="display: none;"></td>
    </tr>
  </tbody>
</table>

希望这有帮助！ :)

Answer 3

在这里，您可以找到解决方案。

我使用position: absolute;&top: 6px进行input class="image-input"，并position: relative parent td。

<style>
    table tr {
        border-bottom: 1px dotted #E8E8E8;
    }
    table tr td {
        padding-top: 6px;
        padding-bottom: 6px;
    }
    .image{
        margin:0;
        padding:0;
    }
    .rowspan {
       position: relative;
    }
    .image-input{
        margin:0;
        padding:0;
        position: absolute;
        top: 6px;
    }
</style>
<table>
    <tbody>
        <tr>
            <td>Category</td>
            <td><input type="text" id="CId"></td>
            <td>Contries </td>
            <td><input type="text" id="Contries"></td>
        </tr>
        <tr>
            <td>Name</td>
            <td><input type="text"></td>
            <td class="image">image</td>
            <td rowspan="2" class="rowspan"><input class="image-input" type="text">
                <img src="/" />
            </td>
        </tr>
        <tr>
            <td>Branch</td>
            <td><input type="text" id="Brand"></td>
            <td></td>
            <td style="display: none;"></td>
        </tr>
        <tr>
            <td>Product</td>
            <td><input type="text"></td>
            <td></td>
            <td style="display: none;"></td>
        </tr>
    </tbody>
</table>

希望这对您有所帮助。