在rowspan td之后如何输入保证金

Question

我一直在努力实现像下面这样非常简单的事情。在我的代码中，你可以看到，在td我设置了rowspan =＆＃34; 2＆＃34;并输入一个输入＆＃34; id = image＆＃34;。我想将图片放在input字段下面。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以考虑在<br>之后使用换行符.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;
        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

您可以通过左侧的图片 floating 获得相同的效果，并且还可以使用相同高度的 negative margin 作为输入字段（默认为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;＆amp; top: 6px的{​​{1}}和input class="image-input"的{​​{1}}。

＆＃13;

＆＃13;

position: relative

＆＃13;

＆＃13;

＆＃13;

希望这会对你有所帮助。