Html 表位于div中两个hr标记之间。表不会从div中获取所有属性

全新的HTML/CSS和实验

我想在两条人力资源标签线之间放一张桌子，一条在上面，一条在下面。我想让桌子的宽度与线条的宽度相匹配，在页面上水平居中，并有粘性的定位

所发生的事情是，线条跟随我设置的宽度，居中，并具有我想要的位置。桌子有位置，但没有宽度，并与线条左对齐，而不是与页面或任何内容对齐

第一节 第二节 第三节 第四节 第五节 第六节 使用style=设置的内联样式是一次性定义

内联CSS用于将唯一样式应用于单个HTML元素

如果要多次重用同一样式，请使用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%。请参见：

，而不是：

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

做：

---

默认情况下，表不会占用父表宽度的100%。默认情况下，表的宽度将取决于内容。所以只要加上宽度：100%；对于表格样式，它将消耗100%的父项宽度

第一节 第二节 第三节 第四节 第五节 第六节

---

为什么首先在元素的末尾和开头使用标记。这就是你的上下边界。用于将两个元素分开，就像在两个段落之间一样。不标记元素的顶部或底部。边距是元素外部的空间。内部空间称为填充。因此，表格不能受到div边距的影响，因为表格位于div内部而不是外部。表的宽度比div小。除非受到限制，否则div将占用100%的文档空间。除非发生溢出，否则该表将占用div的100%空间。如果表格的内容较小，那么它当然不会占用整个可用空间，而只会占用所需的空间。除此之外，没有什么问题，您不应该将表格用于样式设计。对于像您这样的布局，您有FlexBox和css网格。它主要用于测试目的。在学习过程中，我试图了解所有这些东西是如何工作的，以及改变参数的作用。实际上，我只学习了几天HTML/CSS lol。内联样式、CSS样式或头部样式之间并没有区别，并且没有特殊性权重的例外。除此之外，这不是这里的问题。你完全错过了这个问题，没有试图回答这个问题本身。因此，您的anwser不适合作为一个anwser，而只是作为一个注释。它们的继承方式有所不同。表不会从其父级的内联样式继承宽度。表也不会继承css文件中的空间。表格的内容较小。默认情况下，表将只消耗所需的空间。在这种情况下，使用一个类使表调整与其父表的共享值可能更有意义，但这仍然不能解决实际问题。css样式或内联样式对表格的默认宽度没有影响。你说的每一句话都忽略了实际的问题。

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