时间戳

首页 > 解决方案 > 在 HTML 页面中移动表格

css - 在 HTML 页面中移动表格

问题描述

这是我的表格的 CSS 代码：

.styled-table {
    border-collapse: collapse;
    margin: 25px 0;
 margin-top:10px 
    margin-left:100px
    font-size: 0.9em;
    font-family: sans-serif;
    min-width: 400px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    top : 50px;
}

.styled-table thead tr {
    background-color: #009879;
    color: #ffffff;
    text-align: left;
}

.styled-table th,
.styled-table td {
    padding: 12px 15px;
}

.styled-table tbody tr {
    border-bottom: 1px solid #dddddd;
}

.styled-table tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

.styled-table tbody tr:last-of-type {
    border-bottom: 2px solid #009879;
}

.styled-table tbody tr.active-row {
    font-weight: bold;
    color: #009879;
}

我需要这个表格在页面中心的某个地方，而不是在左上角，就像现在一样。我试过添加边距，但它们不起作用。请帮忙。

标签： csshtml-tablemargin

解决方案

只需将您的表格放在一个 div 中并使用它flexbox来将表格与中心对齐

<div>
      <table>
        <tr><td>your table</td></tr>
      </table>
</div>

div{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

推荐阅读