CODEWITHSUNDEEP
htmlcss
Arun
Arun

Reputation: 3077

Floating/Positioning a HTML table cell to the right overlapping the previous cells

Please take a look at http://jsfiddle.net/3kV3Z/

On hover of each table row, the edit and delete buttons appear. Right now they have their own dedicated cell and occupy space even when they are not visible. What I want is for them to appear over the table row. Its fine if they overlap contents of the table row when they appear. I want an effect similar to css {position:fixed; right:0px}

Thanks

<table class='t'>
    <tr><td>Name 1</td><td>10</td><td class='actions'><button>Edit</button><button>Delete</button></td></tr>
    <tr><td>Name 2</td><td>20</td><td class='actions'><button>Edit</button><button>Delete</button></td></tr>
    <tr><td>Name 3</td><td>30</td><td class='actions'><button>Edit</button><button>Delete</button></td></tr>
    <tr><td>Name 4</td><td>40</td><td class='actions'><button>Edit</button><button>Delete</button></td></tr>
    <tr><td>Name 5</td><td>50</td><td class='actions'><button>Edit</button><button>Delete</button></td></tr>
    <tr><td>Name 6</td><td>60</td><td class='actions'><button>Edit</button><button>Delete</button></td></tr>
</table>

Upvotes: 2

Views: 5032

Answers (2)

Snippet
Snippet

Reputation: 1560

Sorry don't Like tables :) but try this one: jsfiddle

<div class="wrapper">
    <div class="row">
         <span>
             Name 1
        </span>
        <span>
            10
        </span> 
        <span class='actions'>
            <button>Edit</button><button>Delete</button>
        </span>  
        <span>
            Some Text here
        </span> 
    </div>
      <div class="row">
         <span>
             Name 2
        </span>
        <span>
            20
        </span> 
          <span class='actions'>
            <button>Edit</button><button>Delete</button>
        </span> 
          <span>
            The quick Brown fox jump over the lazy dog
        </span> 
    </div>
</div>

Upvotes: 1

Arun
Arun

Reputation: 3077

Found a way to do it. http://jsfiddle.net/L2n7M/

.t tr td.actions  {visibility:hidden;position:absolute;margin-left:-70px}
.t tr:hover td.actions  {visibility:visible}

Let me know if someone knows of a better idea. Thanks Arun

Upvotes: 1

Related Questions