HTML: How to add a delete link inside a html table, but still visible as outside the table

I have a table in html with some tabular data.

The thing is that I have designed a delete and edit visually link outside the table (on the left side of the table), that will only be visible when the user hovers the table row.

How can I add these links without messing up the default table layout?

The current problem is th开发者_开发百科at I need to create a holding the delete and edit link, and this messes up the table structure when they are not visible.

So, is there a way to add a container to a table (needs to follow the table row structure) that is not a td? Or do you know about some examples doing something similar that I could have a look at?

Thanks

It got a little complicated, but there's a demo at JS Bin to demonstrate my approach. I'm not entirely sure that -webkit-border-radius supports the notation that I used (I tested in Chrome which supports border-radius), so it might be worth checking.

Incidentally, because of the approach I took (mainly to avoid having to manually add classes) to what could be a 'clean' design, there are some near-bleeding-edge CSS selectors, such as tbody tr:nth-child(odd) td:first-child. I think all of this but the :nth-child(odd) pseudo-selector should be understood by IE7+ (with a valid doctype), but I don't have an installation of Windows on which to test my assumption. As this particular rule is only there to overrule the specificity of the earlier selector to add zebra-striping, if neither are understood nothing is broken, it's just a slightly less jazzy table is all.

The CSS is below:

body
{
    background-color: #39f;
}
thead tr th,
 tbody tr td
{
    background-color: #fff;
    border-collapse: collapse;
    color: #000;
    height: 2em;
    margin: 0;
    padding: 0.5em;
    vertical-align: center;
    width: auto;
}
tbody tr:nth-child(odd) td
{
    background-color: #ffa;
}
th
{
    font-weight: bold;
}
tr th:first-child,
 tr td:first-child,
 tbody tr:nth-child(odd) td:first-child
{
    background-color: transparent;
    border-radius: 1em 0 0 1em;
    color: transparent;
    moz-border-radius: 1em 0 0 1em;
    padding: 0.5em 0 0.5em 0.5em;
    webkit-border-radius: 1em 0 0 1em;
}
tr:hover td:first-child,
 tbody tr:nth-child(odd):hover td:first-child
{
    background-color: #fff;
    color: #000;
}
tbody tr:nth-child(odd):hover td:first-child
{
    background-color: #ffa;
    color: #000;
}

And the html:

  <table cellspacing="0">
    <thead>
      <tr>
        <th></th>
        <th>visible</th>
        <th>visible</th>
        <th>visible</th>
        <th>visible</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>X</td>
        <td>visible</td>
        <td>visible</td>
        <td>visible</td>
        <td>visible</td>
      </tr>
      <tr>
        <td>X</td>
        <td>visible</td>
        <td>visible</td>
        <td>visible</td>
        <td>visible</td>
      </tr>
      <tr>
        <td>X</td>
        <td>visible</td>
        <td>visible</td>
        <td>visible</td>
        <td>visible</td>
      </tr>
    </tbody>
  </table>

Edited

I've added a side-by-side comparison of the above demonstration and an additional approach, which I think might, in the presence of a valid standards-mode doctype, work reasonably well in older browsers.

The revised demo is here: JS Bin, and can, of course, be edited by clicking on the 'Edit using JS Bin' button.

The relevant CSS can also be seen by hovering over the tables (though it probably works better with larger displays).

Edited

To add in the all finished version, to the best -I think- of my ability, there's two tables (as can be seen at JS Bin (each using slightly different mark-up, and quite different css) to demonstrate at least two ways this can be achieved.

Both tables share this CSS:

  body {
    background-color: #39f;
  }
  th {
    font-weight: bold;
    border-bottom: 2px solid #000;
  }
  th.title {
    border-bottom: 1px solid #000;
  }
    th.hidden {
      border: 0 none transparent;
    }
thead tr th,
tbody tr td {
    width: auto;
    height: 2em;
    vertical-align: center;
    background-color: #fff;
    color: #000;
    padding: 0.5em;
    margin: 0;
    border-collapse: collapse;
  }

Next is the 'up-to-date' browsers' CSS:

    #preferred thead tr th:first-child {
      border: 0 none transparent; 
    }
  #preferred tbody tr:nth-child(odd) td {
    background-color: #ffa;
  }
  #preferred tr th:first-child,
  #preferred tr td:first-child,
  #preferred tbody tr:nth-child(odd) td:first-child {
    color: transparent;
    background-color: transparent;
    padding: 0.5em 0 0.5em 0.5em;
    -webkit-border-top-left-radius: 1em;
    -webkit-border-bottom-left-radius: 1em;
    -moz-border-radius: 1em 0 0 1em;
    border-radius: 1em 0 0 1em;
  }

  #preferred tr:hover td:first-child,
  #preferred tbody tr:nth-child(odd):hover td:first-child  {
    color: #000;
    background-color: #fff;
  }
  #preferred tbody tr:nth-child(odd):hover td:first-child  {
    color: #000;
    background-color: #ffa;
  }

And the relevant html mark-up:

  <table cellspacing="0" id="preferred">
    <thead>
      <tr>
        <th></th>
        <th class="title" colspan="4">id="preferred"</th>
      </tr>
      <tr>
        <th></th>
        <th>visible</th>
        <th>visible</th>
        <th>visible</th>
        <th>visible</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>X</td>
        <td>visible</td>
        <td>visible</td>
        <td>visible</td>
        <td>visible</td>
      </tr>
      <tr>
        <td>X</td>
        <td>visible</td>
        <td>visible</td>
        <td>visible</td>
        <td>visible</td>
      </tr>
      <tr>
        <td>X</td>
        <td>visible</td>
        <td>visible</td>
        <td>visible</td>
        <td>visible</td>
      </tr>
    </tbody>
  </table>

Next is the older browser's CSS:

    #ieMaybe {
      background-color: #39f;
    }
  #ieMaybe th,
  #ieMaybe td {
    background-color: #fff;
  }
  #ieMaybe th.hidden,
  #ieMaybe td.hidden {
    color: #39f;
    background-color: transparent;
    padding: 0.5em 0 0.5em 0.5em;
    -webkit-border-top-left-radius: 1em;
    -webkit-border-bottom-left-radius: 1em;
    -moz-border-radius: 1em 0 0 1em;
    border-radius: 1em 0 0 1em;
  }

  #ieMaybe tr:hover td.hidden,
  #ieMaybe tr td.hidden:hover {
    color: #000;
    background-color: #fff;
  }

And the older browsers' html mark-up:

  <table cellspacing="0" id="ieMaybe">
    <thead>
      <tr>
        <th class="hidden"></th>
        <th class="title" colspan="4">id="ieMaybe"</th>
      </tr>
      <tr>
        <th class="hidden"></th>
        <th>visible</th>
        <th>visible</th>
        <th>visible</th>
        <th>visible</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="hidden">X</td>
        <td>visible</td>
        <td>visible</td>
        <td>visible</td>
        <td>visible</td>
      </tr>
      <tr>
        <td class="hidden">X</td>
        <td>visible</td>
        <td>visible</td>
        <td>visible</td>
        <td>visible</td>
      </tr>
      <tr>
        <td class="hidden">X</td>
        <td>visible</td>
        <td>visible</td>
        <td>visible</td>
        <td>visible</td>
      </tr>
    </tbody>
  </table>

I can't say, for sure, what versions of IE < 8 do in the presence of such chicanery, but IE8 (with a <!DOCTYPE html>) renders it willingly, albeit with no pretence at curved borders. Which is a shame, here's waiting for IE9! =)

As @Yi Jiang noted, in the comments, there were a couple of errors in the first-posted code, those have been left as is (because I'm starting to go CSS-blind), but the code-blocks above have been directly pasted from the latest working JS Bin demo, so unless ctrl+V's been playing up, it should, I hope, be fine.

your could add the links in the first cell and hide them with CSS. position them absolutely and move them to appear as if they are partially outside the table.

you could put all the controls inside a column that has a class "controls" and then play with the css to hide or show... something like this

example

hope this helps