Question

我正在尝试将此标题置于页面中间。不确定为什么margin-left:auto和margin-right:auto无效。它不会为表格注册align:center。该表只是一个标题。这是我对css和table的代码。

 <style>
    table {
        margin-top: 2em;
        margin-left: auto;
        margin-right: auto;
    }

    table th {
        background: linear-gradient(to bottom right, #6688FF, #AACCFF); 
        height: 4em; 
        text-align: center; 
        text-transform: capitalize;
        color:white;
        border:#ccc 1px solid;
    }

    table tr {
        text-align: center;
    }

    table thead {
        position:fixed;
    }
</style>

<table class="head">

        <%--header --%>
        <thead>
            <tr>
                <th>one</th>
                <th>two</th>
                <th>three</th>

            </tr>
        </thead>

        <%--body --%>
        <tbody>

        </tbody>

    </table>

Answer 1

由于你已经修复了thead，它已退出正常流程。下面，我展示了一种独立于周围环境水平居中的方法。否则，你最好不要修复表格，因为在语义上他们应该继续他们的父/子关系。

你有没有理由认为这是一张桌子？

＆＃13;

table {
  margin-top: 2em;
}

table th {
  background: linear-gradient(to bottom right, #6688FF, #AACCFF); 
  height: 4em; 
  text-align: center; 
  text-transform: capitalize;
  color:white;
  border:#ccc 1px solid;
}

table tr {
  text-align: center;
}

table thead {
  position:fixed;
  left: 50%;
  transform: translateX(-50%);
}

＆＃13;

<table class="head">
  <thead>
    <tr>
      <th>one</th>
      <th>two</th>
      <th>three</th>
    </tr>
  </thead>
  <tbody>

  </tbody>
</table>

＆＃13;

Answer 2

删除从表格选择器中修复的位置，它应该可以正常工作

页面HTML中的中心表

2 个答案: