html - 将 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;
}

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

需要在上面红色方 block 出现的地方

Answer 1

我将您的 span 包裹在一个 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/