div 中两个 hr 标签之间的表格。表格不会从 div 中获取所有属性

Question

全新的 HTML/CSS 和实验。

我试图在两条 hr 标记行之间放置一个表格（一个在顶部，一个在底部）。我想让表格的宽度与线条的宽度相匹配，将页面上的所有内容水平居中，并具有粘性定位。

发生的情况是，线条遵循我设置的宽度，居中，并具有我想要的定位。表格有定位，但没有宽度，并且与线条左对齐（不与页面或任何东西对齐）。

<div style="width:100%; max-width: 800px; margin:auto; position:sticky; top:0px; ">
  <hr>
  <table style="border:1px solid black; background-color:Coral">
    <tr>
      <th><u>Section 1</u></th>
      <th><u>Section 2</u></th>
      <th><u>Section 3</u></th>
      <th><u>Section 4</u></th>
      <th><u>Section 5</u></th>
      <th><u>Section 6</u></th>
    </tr>
    <tr style="text-align:center">
      <td><a href="S1WordFormatting.html">Word<br/>Formatting</a></td>
      <td><a href="S2Lists.html">Lists</a></td>
      <td><a href="S3Tables.html">Tables</a></td>
      <td><a href="S4ImagesandVideos.html">Images and<br/>Videos</a></td>
      <td><a href="S5Linking.html">Linking</a></td>
      <td><a href="S6InputTypes.html">Input Types<br/>(Text Boxes)</a></td>
    </tr>
  </table>
  <hr>
</div>

为什么表格会从 div 中获取定位，而不是宽度或边距？另外，为什么它会与线条左对齐？

我知道我可以通过将宽度和边距添加到 table 标签来解决这个问题，但是它可以在 div 标签中修复吗？还是我误解/遗漏了关于 div 标签如何工作的一些东西？我认为它会将任何样式应用于标签之间的任何元素。

非常感谢您的帮助！

Answer 1

而不是：

<div style="width:100%; max-width: 800px; margin:auto; position:sticky; top:0px; ">

做：

<div style="flex-direction: column;width:100%;display: flex;max-width: 800px;margin:auto;position:sticky;top:0px;">

Answer 2

默认情况下，表格不会占用父级宽度的 100%。默认情况下，表格的宽度将取决于content。因此，只需将width: 100%; 添加到表格样式中，它将占用父母宽度的 100%。

<div style="width:100%; max-width: 800px; margin:auto; position:sticky; top:0px; ">
  <hr>
  <table style="width: 100%; border:1px solid black; background-color:Coral">
    <tr>
      <th><u>Section 1</u></th>
      <th><u>Section 2</u></th>
      <th><u>Section 3</u></th>
      <th><u>Section 4</u></th>
      <th><u>Section 5</u></th>
      <th><u>Section 6</u></th>
    </tr>
    <tr style="text-align:center">
      <td><a href="S1WordFormatting.html">Word<br/>Formatting</a></td>
      <td><a href="S2Lists.html">Lists</a></td>
      <td><a href="S3Tables.html">Tables</a></td>
      <td><a href="S4ImagesandVideos.html">Images and<br/>Videos</a></td>
      <td><a href="S5Linking.html">Linking</a></td>
      <td><a href="S6InputTypes.html">Input Types<br/>(Text Boxes)</a></td>
    </tr>
  </table>
  <hr>
</div>

Answer 3

内联样式（使用style= 设置是一次性定义。

内联 CSS 用于将独特的样式应用于单个 HTML 元素 https://www.w3schools.com/html/html_css.asp

如果您想多次重复使用相同的样式，请使用 css 类

<style>
.commonWidthAndMargin {
width:100%;
max-width: 800px;
margin:auto;
}
</style>
<div class="commonWidthAndMargin" style="position:sticky; top:0px; "> 
    <hr>
      <table class="commonWidthAndMargin" style="border:1px solid black; background-color:Coral">
        ...etc
      </table>
    <hr>
</div> 

此外，表的默认行为是不扩展到其父级。默认情况下，子 div 将占用其父 div 的 100%。见：link