如何在HTML CSS外部应在表外看到的每个TD中放置一个链接

Question

我有一个表，我在表的每个td上都有一个链接。但是我需要以这种方式将这些链接放在桌子外面。我已经做到了，但是在第一个单元格中，我需要隐藏它。如果我用CSS隐藏td，我的链接也将隐藏。这是HTML

td {
  position: relative;
}
span {
  position: absolute;
  left: -80px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="container">
  <h2>Basic Table</h2>
  <p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>
  <table class="table table-bordered">
    <tbody>
      <tr>
        <td><span>link</span></td>
        <td>John</td>
        <td>Doe</td>
        <td>[e-mail]</td>
      </tr>
      <tr>
        <td><span>link</span></td>
        <td>Mary</td>
        <td>Moe</td>
        <td>[e-mail]</td>
      </tr>
      <tr>
        <td><span>link</span></td>
        <td>July</td>
        <td>Dooley</td>
        <td>[e-mail]</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

我用其他CSS实现了它，希望它对您有用。

td{
  position:relative;
}
  
span{
  position:absolute;
  left:-80px;
}
table.table.table-bordered {
    border-left-width: 0;
}
table.table td:first-child {
    border: none; 
    width: 0;
    padding: 0;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="container">
  <h2>Basic Table</h2>
  <p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>            
  <table class="table table-bordered">
    <tbody>
      <tr>
      <td><span>link</span></td>
        <td>John</td>
        <td>Doe</td>
        <td>[e-mail]</td>
      </tr>
      <tr>
        <td><span>link</span></td>
        <td>Mary</td>
        <td>Moe</td>
        <td>[e-mail]</td>
      </tr>
      <tr>
        <td><span>link</span></td>
        <td>July</td>
        <td>Dooley</td>
        <td>[e-mail]</td>
      </tr>
    </tbody>
  </table>
</div>