Question

如何将元素放置在html表格单元格中，以便一个元素位于左侧并居中，而另外两个元素位于第一个元素的侧面并且彼此叠加。

例如：

狗男性女性

狗将在左侧居中，而雄性和雌性将在彼此的顶部并且在第三个细胞中垂直居中。

Answer 1

我不知道这是否是你需要的。但我试着做table within a table件事

<table border="1px solid black">
    <tr>

        <td>

            <table>

                <tr>
                    <td rowspan="2">Dog</td>
                    <td>male</td>
                </tr>
                <tr>
                    <td>female</td>
                </tr>
            </table>

        </td>
    </tr>

</table>

这是一个小提琴sample。

Answer 2

只是略有不同的方法 - FIDDLE

“最终”版本将取决于您需要填写多少个盒子，您自己的个人喜好等。 CSS

table {
    background-color: yellow;
    width: 200px;
    border: 1px solid gray;
    border-collapse: collapse;
    margin: 30px auto;
}
table td {
    padding: 5px 5px 5px 20px;
    border-bottom: 1px solid gray;

}

HTML

<table>
    <tr> <td>Dog</td> <td> <div>Male <br> Female</div> </td></tr>
    <tr> <td>Cat</td> <td> <div>Male <br> Female</div> </td></tr>    
</table>

HTML表格单元格定位元素，以便它们堆叠在单元格的特定区域中

2 个答案: