html - 如何在 html css 表外可见的表的每个 td 内放置一个链接

Question

我有一张 table ，我在 table 的每个 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>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>

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>