Question

I am trying to position a span element relative to the upper-right corner of a table object.

This table may be wider or move around based on what the user does on the tool, so I was looking for something simpler than the jQuery.position method. I was hoping to do something elegant with CSS.

I’ve built a small example of my dilemma in 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>

Below are the CSS Styles

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

UPDATE: Added some images to show required positions:

Needs to be where the red Square appears above

Answer 1

I wrapped your span in a div and placed it in the <th> with your title:

 <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;

Here is a demo: http://jsfiddle.net/ZSGfc/6/