html - 沿 3 行将 div 定位在表外

Question

考虑下表

<table border="1">
    <tr>
        <td>some data</td>
        <td>some data</td>
        <td>&nbsp</td>
    </tr>
    <tr>
        <td>some data</td>
        <td>some data</td>
        <td>need to display smthng here</td>
    </tr>
    <tr>
        <td>some data</td>
        <td>some data</td>
        <td>&nbsp</td>
    </tr>
</table>

我想在第二行旁边显示一些东西。我试图有第三列并放入&nbsp单元格（1,3）和单元格（3,3​​），但它破坏了外观，因为我也需要表格边框。

我认为将 div 元素放置在表格之外但与第二行平行但我不知道该怎么做会更好。如果我在第二次结束后包含一个 div 元素<tr>..</tr>，那将无济于事。

任何人都可以提出解决方案吗？我需要表格边框。

Answer 1

您可以使用rowspan属性垂直折叠单元格

<table border="1">
    <tr>
        <td>some data</td>
        <td>some data</td>
        <td rowspan="3">need to display smthng here</td>
    </tr>
    <tr>
        <td>some data</td>
        <td>some data</td>

    </tr>
    <tr>
        <td>some data</td>
        <td>some data</td>
    </tr>
</table>

您可以在此处查看输出：jsfiddle.net/8DcAB/

Answer 2

像这样 ？http://jsfiddle.net/4NxY7/

position: absolute将从流中删除元素，因此甚至不需要行跨度。

<table border="1">
    <tr>
        <td>some data</td>
        <td>some data</td>
    </tr>
    <tr>
        <td>some data</td>
        <td>some data</td>
        <td style="margin-left: 5px; position: absolute;">
            need to display smthng here
        </td>
    </tr>
    <tr>
        <td>some data</td>
        <td>some data</td>
    </tr>
</table>

Answer 3

不知道您想与该行平行显示什么，但请查看此小提琴http://jsfiddle.net/mQZvx/。希望有帮助。

#myDiv{
position: relative;
float: right;
bottom:50px;
right:350px;
}