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

如何解决div 中两个 hr 标签之间的表表不会从 div 中获取所有属性

全新的 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 标签的工作方式有误解/遗漏吗？我认为它会将任何样式应用于标签之间的任何元素。

非常感谢您的帮助！

解决方法

而不是：

<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;">

,

默认情况下，表格不会占用 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>

,

内联样式（使用 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 将占据其父级的 100%。见：link