页面HTML中的中心表

我试图将此页眉置于页面中间。不知道为什么margin-left:auto和margin-right:auto不起作用。它不会为表格注册align:center。该表只是一个标题。这是我对css和table的代码。页面HTML中的中心表

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

来源

2016-06-07 mysticalstick

由于您正在修复thead，所以它被拉出正常流程。下面，我已经演示了一种独立于周围环境水平对中的方法。否则，你最好修改表格，因为从语义上讲，他们应该继续他们的父母/子女关系。

有没有理由让你成为这个桌子？

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%); 
 
}

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

 
    </tbody> 
 
</table>

来源

2016-06-07 17:17:36

我想作一个单独的表头孤单，因为我不想被固定在首页的页眉滚动浏览数据表。你的方法是有效的，但是当窗口大小调整时，有没有将它移动？我使用的是asp.net，所以数据表只是'HorizontalAlign =“Center”' – mysticalstick

因此，这种方法的美丽（你应该能够通过点击全屏按钮来测试片段），它应该总是水平居中这种方法，甚至在调整大小。因此，除非您在较小的屏幕上进行其他设计更改，否则无需担心响应式更新。 –

取出位置从表THEAD选择固定的，它应该工作

来源

2016-06-07 17:23:22

页面HTML中的中心表

回答

相关问题