HTML:如何在HTML表内添加删除链接,但仍在表外可见

有点复杂,但有个演示 JS Bin 来演示我的方法。我不完全确定 -webkit-border-radius 支持我使用的符号(我在支持 border-radius ,所以可能值得检查。

顺便说一下,由于我所采用的方法(主要是为了避免手动添加类)可能是一个“干净”的设计,有一些接近出血边缘的CSS选择器,例如 tbody tr:nth-child(odd) td:first-child :nth-child(odd)

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

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

JS Bin

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

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

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

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

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

<!DOCTYPE html>

example