分享
为什么问答平台  ›  专栏  ›  技术社区  ›  carreankush

在HTML CSS中,如何在表的每个td中放置一个链接,该链接应在表的外部可见。 - How to put a link inside every td of table that should be visible outside of table in html css

  •  0
  • carreankush  · 技术社区  · 2 周前

    我有一个表,我在表的每个td上都有一个链接。但是我需要以这样的方式放置这些链接,它应该看起来在表的外面。我已经这样做了,但是在第一个单元格已经创建,我需要隐藏它。如果我用css隐藏td,我的链接也将隐藏。这是HTML

    HTML

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

    样式表

    td{
      position:relative;
      }
      span{
      position:absolute;
      left:-80px;
      }
    
    1 回复  |  直到 2 周前
        1
  •  2
  •   Mobarak Ali    2 周前

    我用附加的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>