用于将Span元素定位在Table元素上的CSS解决方案

Question

我正在尝试相对于表格对象的右上角定位span元素。

这个表可能更宽或根据用户在工具上的操作移动，所以我在寻找比jQuery.position方法更简单的东西。我希望用CSS做一些优雅的事情。

我在jsfiddle中建立了一个我的困境的一个小例子：http://jsfiddle.net/xerf/ZSGfc/

<div>
    <table>
        <thead>
            <tr>
                <th colspan="3">Title</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Stuff 1</td>
                <td>Stuff 2</td>
                <td>Stuff 3</td>
            </tr>
            <tr>
                <td>Stuff 1</td>
                <td>Stuff 2</td>
                <td>Stuff 3</td>
            </tr>
            <tr>
                <td>Stuff 1</td>
                <td>Stuff 2</td>
                <td>Stuff 3</td>
            </tr>
        </tbody>
    </table>
    <span>&times;</span>
</div>

以下是CSS样式

body
{
    font-family:sans-serif;
}

table
{
    border-collapse: collapse;
    border: 1px solid black;
    margin: 20px;
}

th
{
    padding: 6px;
}

td
{
    padding: 3px;
    border: 1px solid black;
}

更新：添加了一些图片以显示所需位置：

需要在红色正方形上方出现

Answer 1

我将你的跨度包裹在一个div中并将其放在<th>中，标题为：

 <th colspan="3"><div id="container">Title
                    <span>&times;</span></div></th>

的CSS：

#container{
    width:auto;
    height:auto;
    position:relative;
}
span{
    position:absolute;
    right:0px;
    top:0px;

这是一个演示：http://jsfiddle.net/ZSGfc/6/

Answer 2

一种非常简单的方法是简单地将另一行添加到表格的顶部，删除其左，上和右边框。然后移动您的跨度，使其包含在此新行中，并将文本右对齐。

Answer 3

我建议使用div或添加另一个div来控制表的宽度，然后让表继承该div的宽度。从那里将div的{​​{1}}属性设置为relative。然后，您可以将position绝对放在span上。

类似于此fiddle的内容。经过一些调整。

Answer 4

试试这个：

div{ 
    position:relative;
    width: XXXpx;
}
table{
    width: XXXpx;
}
span{
   position: absolute;
   top: 0px;
   right: 0px;
}

Answer 5

在colspan="3"和text-align:right上方的附加表格单元格可以正常工作。