时间戳

首页 > 解决方案 > 居中的表格，其中包含跨越两列文章的链接

css - 居中的表格，其中包含跨越两列文章的链接

问题描述

我一直在尝试column-span:all在我的 CSS 文件中使用一个跨越两列文章容器的表格。跨越部分有效，但我的问题是我的表格中有几个链接由于某种原因在 Chrome (v 85) 和 Ms Edge 中不起作用。通过不工作，我的意思是我无法单击链接并且将鼠标悬停在它们上方时，没有任何更改生效（a:hover什么都不做）。使用 Firefox 或 IE 似乎不会出现此问题。

如果我删除margin: 2em auto;链接再次工作，但我的表格没有居中。

所以，问题是，我怎样才能制作一个跨越两列文章容器的居中表格，在 Chrome、IE、FF、Safari（未测试）等中仍然有效链接？

是否有替代方案？

MWE：

<html>
  <head>
    <style>
      article{column-count:2;}
      a{color:green;}
      a:visited{color:red;}
      a:hover{color:blue;}
      a:active{color:yellow;}
      table{column-span:all;margin:2em auto;}
    </style>
  </head>
  <body>
    <article>
      <table>
        <tr>
          <td><a href="https://www.google.com/">google</a></td>
          <td>unimportant text</td>
        </tr>
        <tr>
          <td><a href="https://www.duckduckgo.com/">duckduckgo</a></td>
          <td>another unimportant text</td>
        </tr>
      </table>
    </article>
  </body>
</html>

标签： csshtml-table

解决方案

<html>
  <head>
    <style>
      article{column-count:2;}
      a{color:green;}
      a:visited{color:red;}
      a:hover{color:blue;}
      a:active{color:yellow;}
      .center{
         column-span:all;
         margin:2em 0;
         display:flex;
         justify-content:center;
      }
    </style>
  </head>
  <body>
    <article>
     <div class="center">
      <table>
        <tr>
          <td><a href="https://www.google.com/">google</a></td>
          <td>unimportant text</td>
        </tr>
        <tr>
          <td><a href="https://www.duckduckgo.com/">duckduckgo</a></td>
          <td>another unimportant text</td>
        </tr>
      </table>
     </div>
    </article>
  </body>
</html>

推荐阅读