使用 CSS 居中表格答案

【问题标题】：Centering table using CSS使用 CSS 居中表格
【发布时间】：2022-01-24 13:02:36
【问题描述】：

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

这是我使用的 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>

【问题讨论】：

标签： html css html-table

【解决方案1】：

问题是您将表格的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>

【讨论】：

【解决方案2】：

像这样改变你的CSS：

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

Working example

【讨论】：

【解决方案3】：

这样就可以得到结果 -->

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

【讨论】：

【解决方案4】：

你可以使用弹性盒子。使用带边距的width: 100% 没有意义。

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

【讨论】：