javascript - rowspan td后如何输入边距

Question

我一直在尝试实现一些非常简单的事情，如下所示，在我的代码中，您可以看到，在 td 中，我设置了 rowspan="2" 并放置了一个 输入“id=图像”。我正在尝试将图像放在 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

可以考虑使用换行符<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>