如何在HTML CSS中将链接放置在表格的每个td中，而表格的外部应该可见

Question

我有一个表，该表的每个--inspect-brk上都有一个链接。但是我需要将这些链接放置在表格之外。我已经做到了，但是在创建第一个单元格时，我需要将其隐藏。如果我用CSS隐藏了td，那么我的链接也将隐藏。这是HTML

td

td {
  position: relative;
}

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

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>john@example.com</td>
      </tr>
      <tr>
        <td><span>link</span></td>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td><span>link</span></td>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>