HTML：如何在html表中添加删除链接，但仍然在表外可见

时间：2010-10-03 12:27:23

标签： html css

我在html中有一个包含一些表格数据的表格。

问题是我在桌子外面（表格的左侧）设计了一个删除和编辑可视链接，只有当用户将表格行悬停时才会显示。

如何在不弄乱默认表格布局的情况下添加这些链接？

目前的问题是，我需要创建一个包含删除和编辑链接，这会在表格结构不可见时混乱。

那么，有没有办法将一个容器添加到一个表（需要遵循表行结构），而不是一个td？或者你知道一些类似于我可以看到的类似的例子吗？Edit table

由于

3 个答案:

答案 0 :(得分：2)

它有点复杂，但在JS Bin有一个演示来展示我的方法。我不完全确定-webkit-border-radius支持我使用的符号（我在Chrome中测试了支持border-radius），因此可能值得检查。

顺便说一句，由于我采用的方法（主要是为了避免手动添加类）可能是一个“干净”的设计，因此有一些近乎出血的CSS选择器，例如tbody tr:nth-child(odd) td:first-child。我认为除:nth-child(odd)伪选择器之外的所有这些都应该被IE7 +（具有有效的doctype）理解，但是我没有安装Windows来测试我的假设。由于这个特殊规则只是否决了早期选择器添加斑马条纹的特殊性，如果两者都没有被理解，那么它只是一个稍微不那么模糊的表格。

CSS如下：

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

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

<强>被修改

我添加了上述演示和另一种方法的并排比较，我认为可能，在有效的标准模式doctype存在的情况下，工作得相当好旧浏览器。

修改过的演示在这里：JS Bin，当然可以点击“使用JS Bin编辑”按钮进行编辑。

通过将鼠标悬停在表格上也可以看到相关的CSS（虽然它可能更适合大型显示器。）

<强>被修改

要添加所有完成的版本，最好 - 我想我的能力，有两个表（可以在JS Bin看到（每个使用稍微不同的标记，并且完全不同的css）至少证明两种方法可以实现。

两个表共享此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;
  }

接下来是'最新'浏览器的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;
  }

以及相关的html标记：

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

接下来是旧浏览器的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;
  }

旧浏览器的html标记：

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

我不能肯定地说，IE的版本是什么？ 8在存在这种诡计的情况下，IE8（带有<!DOCTYPE html>）会自愿地呈现它，尽管在弯曲的边界没有假装。哪个是耻辱，这里正在等待IE9！ =）

正如@Yi Jiang所说，在评论中，首发代码中存在一些错误，这些错误一直保留（因为我开始使用CSS-blind），但代码块上面已经直接粘贴了最新的JS Bin演示版，所以除非 ctrl + V 一直在播放，否则应该，我希望，没事。

答案 1 :(得分：1)

您可以在第一个单元格中添加链接并使用CSS隐藏它们。绝对定位它们并将它们移动到看起来好像它们部分在桌子外面。

答案 2 :(得分：1)

你可以将所有控件放在一个具有“控件”类的列中，然后使用css来隐藏或显示......这样的事情

example

希望这会有所帮助

相关问题
最新问题