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

Posted 2023-03-06

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

【英文标题】：Table between two hr tags in a div. Table doesn't take all attributes from div

【发布时间】：2021-06-11 04:55:01

【问题描述】：

全新的 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 标签如何工作的一些东西？我认为它会将任何样式应用于标签之间的任何元素。

非常感谢您的帮助！

【问题讨论】：

为什么首先在元素的结尾和开头使用<hr> 标签。这就是你有边界顶部和底部的东西。 <hr> 用于将 2 个元素分开，例如在 2 个段落之间。不标记元素的顶部或底部。

margin 是元素外部的空间。内部空间称为padding。因此，表格不受 div 的边距影响，因为表格在 div 内部而不是在外部。表格的宽度比 div 小。除非受到限制，否则 div 将占用 100% 的文档空间。除非发生溢出，否则该表将占用 div 空间的 100%。如果表格的内容更小，那么它当然不会占用整个可用空间，而只会占用所需的空间。

除此之外没有任何问题，您不应该使用表格来进行样式设置。对于像你这样的布局，你有 flexboxes 和 css-grid。

主要用于测试目的。在学习过程中，试图了解所有这些事情是如何工作的，以及改变参数的作用。从字面上看，我才几天就开始学习 HTML/CSS 哈哈。

【参考方案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;">

【参考方案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>

【参考方案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

【讨论】：

内联样式或 css 样式或头部样式之间没有区别，具体权重除外。除此之外，这不是这里的问题。你完全错过了这个问题，而不是试图回答这个问题本身。因此，您的 anwser 不适合作为 anwser 作为评论。

它们的继承方式有所不同。表格不会从其父级的内联样式继承宽度。

表也不会继承 css 文件中的空间。表的内容更小。默认情况下，表只会占用所需的空间。

在这种情况下，使用一个类来使表调整与其父级的共享值更有意义

也许可以，但这仍然不能解决实际问题。 css-style 或 inline 样式对表格默认宽度没有影响。你所说的每一句话都错过了实际的问题和问题。