link 元素 inside table td 不会展开以填满整行

Question

在下面的示例中，灰色的“td”栏将填满整个 window 宽度，但我无法将封装的 link 填满。我希望整个栏都处于活动状态 link，而不仅仅是文本：

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

才能解决

Answer 1

只需将 display: flex; 添加到 CSS 中的 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>

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

link 元素 inside table td 不会展开以填满整行

link element inside table td won't expand to fill whole line

css

hyperlink