使用 CSS 居中 table

Question

我有一个 table 想要在屏幕上居中，但没有任何效果。我无法弄清楚我需要做什么或我做错了什么。任何帮助都会很棒。

这是我的 css 我正在使用：

<style>
table{
    width: 100%;
    height: 900px;
    overflow: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
      }
</style>

这是我的 table 代码：

<table class = 'table table-bordered '>
<tr style='background-color: black; color: white;'>
    <th>ID</th>
    <th>Book-Name</th>
    <th>Author-Name</th>
    <th>Edition</th>
    <th>Status</th>
    <th>Quantity</th>
    <th>Department</th>
</tr>
<?php

while ($row = mysqli_fetch_assoc($result)) {
?>
<tr style = 'background-color: white;'>
    <td><?php echo $row['bid'] ?></td>
    <td><?php echo $row['name'] ?></td>
    <td><?php echo $row['authors'] ?></td>
    <td><?php echo $row['edition'] ?></td>
    <td><?php echo $row['status'] ?></td>
    <td><?php echo $row['quantity'] ?></td>
    <td><?php echo $row['department'] ?></td>
</tr>
<?php
}

?>
</table>

Answer 1

你可以使用 flexbox。使用带边距的 width: 100% 没有意义。

table {
    display: flex;
    justify-content: center;
    height: 900px;
    overflow: auto;
}

Answer 2

像这样更改您的css：

table{
  width: 100%;
  overflow: auto;
}

Working example

Answer 3

你可以这样实现-->

table {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Answer 4

问题是您将 table 的 width 指定为全屏的 100%，同时您正在使用 display: block

两种解决方案：

通过将 width 更改为全屏

通过删除 display: block ，但我必须注意到您还设置了 height: 900px 这将使您的 table 以任何方式变为 900px，您可以将其更改为 max-height

table{
    width: 80%;
    height:900px;
    overflow: auto;
     display: block;
    margin-left: auto;
    margin-right: auto;
      }

<table class = 'table table-bordered '>
<tr style='background-color: black; color: white;'>
    <th>ID</th>
    <th>Book-Name</th>
    <th>Author-Name</th>
    <th>Edition</th>
    <th>Status</th>
    <th>Quantity</th>
    <th>Department</th>
</tr>
<?php

while ($row = mysqli_fetch_assoc($result)) {
?>
<tr style = 'background-color: white;'>
    <td><?php echo $row['bid'] ?></td>
    <td><?php echo $row['name'] ?></td>
    <td><?php echo $row['authors'] ?></td>
    <td><?php echo $row['edition'] ?></td>
    <td><?php echo $row['status'] ?></td>
    <td><?php echo $row['quantity'] ?></td>
    <td><?php echo $row['department'] ?></td>
</tr>
<?php
}

?>
</table>

使用 CSS 居中 table

Centering table using CSS

html

css

html-table