使用 CSS 的定心台

Question

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

这是我的 css 我正在使用：

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

这是我的表格代码：

<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% with margins 没有意义。

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

Answer 2

像这样更改您的 css：

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

工作示例

Answer 3

您可以通过这种方式获得结果-->

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

Answer 4

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

两种解决方案：

通过将width更改为降低到全屏

通过删除display: block ，但我必须注意到您还设置了height: 900px这将使您的表格以任何方式变为 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>