表 td 内的链接元素不会扩展以填充整行答案

【问题标题】：link element inside table td won't expand to fill whole line表 td 内的链接元素不会扩展以填充整行
【发布时间】：2021-08-31 18:20:02
【问题描述】：

在以下示例中，灰色的“td”栏将填充整个窗口宽度，但我无法获得封装的链接。我希望整个栏成为活动链接，而不仅仅是文本：

<html>

<head>
  <style type="text/css">
    <!-- table,
    tr,
    td {
      width: 100%;
      background: gray;
    }
    
    a {
      width: 100%;
      text-align: left;
      color: white;
      background-color: black;
      font-size: 24px
    }
    -->
  </style>
</head>
  <body>
    <table>
      <tr>
        <td><a href="#">test</a></td>
      </tr>
    </table>
  </body>
</html>

很遗憾，我无法更改 HTML 元素的顺序。这只能通过 CSS/Javascript 来解决。

【问题讨论】：

标签： css hyperlink

【解决方案1】：

只需在 CSS 中将display: flex; 添加到a：

 <html>
<head>
  <style type="text/css">
     <!--
     table, tr, td {width: 100%;background: gray;}
     a {width:100%;
       text-align:left;
       color:white;
       background-color:black;
       font-size: 24px;
       display: flex;
       }
     -->
     </style>
</head>
<body>

<table>
   <tr>
     <td><a href="#">test</a></td>
   </tr>
</table>

  </body>
</html>

【讨论】：

谢谢。我只是想知道添加：a {display:block;} 有效。类似的解决方案

【解决方案2】：

添加display:block 就可以了。

<html>

<head>
  <style type="text/css">
    <!-- table,
    tr,
    td {
      width: 100%;
      background: gray;
    }
    
    a {
      width: 100%;
      text-align: left;
      color: white;
      background-color: black;
      font-size: 24px;
      display:block
    }
    -->
  </style>
</head>
  <body>
    <table>
      <tr>
        <td><a href="#">test</a></td>
      </tr>
    </table>
  </body>
</html>

【讨论】：