在 div 中将表格居中答案

【问题标题】：Center a table within a div在 div 中将表格居中
【发布时间】：2020-10-29 08:41:27
【问题描述】：

请帮忙，我一直坚持这个。我在网上找到了很多解决方案，但没有一个对我有用。

我正在尝试使桌子居中。这是它现在的样子：

HTML：

<div class="container">
  <table id="multTable"></table>
</div>

CSS：

#multTable {
  width: 100%;
  margin: 0 auto;
  display:block;
  height: 200px;
  overflow-x:scroll;
  overflow-y:scroll;
}

我试过了：

.container {
  width: 100%;
}
#multTable {
  margin: 0 auto;
  height: 200px;
  overflow-x:scroll;
  overflow-y:scroll;
}

但是表格溢出了页面大小：我在这里做错了什么？

【问题讨论】：

标签： html css

【解决方案1】：

在您最初的尝试中，您的表格不会居中，因为您试图将占用 100% 可能空间的东西居中。从技术上讲，它是居中的，你只是看不到它占据了整个空间。

想象一下，如果你有一个100px 的容器。这个容器里面有一个你想要居中的块。但是您将此块设置为宽度为100px。根本看不到差距！

所以这行不通：

{ 
   width: 100%;
   margin: 0 auto;
}

相反，你应该给居中元素一个固定的宽度：

width: 400px; /* or whatever is needed */
margin: 0 auto;

这样它周围就有了一些空间。

【讨论】：

【解决方案2】：

你试过了吗：

.container {
    //
}

#multTable {
    margin: 0 auto;
    overflow-x:scroll;
    overflow-y:scroll;
}

【讨论】：

【解决方案3】：

使您的容器具有其所在的全部宽度。然后制作表格并指定最大宽度。

.container {
  width: 100%;
}
#multTable {
  max-width: 100%;
}

我会帮助更多人看看你的 hml 的其余部分。

【讨论】：

【解决方案4】：

只添加这个

.container {
  display: flex;
  justify-content: center;
}

【讨论】：

您好，欢迎来到 SO。如果您回答问题，请确保还添加有关您添加的内容和添加原因的信息。您的解决方案如何运作，以便其他人能够理解并从中学习。除此之外，您的 anwser 不会解决任何问题。问题是，表格宽度已经比 wv 大，因此溢出。将其设置为 flexbox 并不能解决此问题。