Question

我有一张居中的桌子。

我想在表格中画一条线，但该线条显示在表格的左侧。

＆＃13;

table {
  height: 450px;
  width: 450px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  table-layout: fixed;
  position: relative;
}
#winLine {
  height: 100%;
  width: 0px;
  border: 4px solid blue;
  border-radius: 10px;
  left: 50px;
  position: absolute;
}

＆＃13;

<table>
  <div id="winLine"></div>
  <tr>
    <td id="0"></td>
    <td id="1"></td>
    <td id="2"></td>
  </tr>
  <tr>
    <td id="3"></td>
    <td id="4"></td>
    <td id="5"></td>
  </tr>
  <tr>
    <td id="6"></td>
    <td id="7"></td>
    <td id="8"></td>
  </tr>
</table>

＆＃13;

Answer 1

您不能将<div>放在<table>内，并将其用作定位的上下文。创建一个包装器<div>，并使用它来定位该行：

.wrapper {
  position: relative; 
  height: 450px;
  width: 450px;
  margin: 0 auto;
}

table {
  height: 100%;
  width: 100%;
  text-align: center;
  table-layout: fixed;
  position: relative;
  border: 1px solid black;
}
#winLine {
  height: 100%;
  width: 0px;
  border: 4px solid blue;
  border-radius: 10px;
  left: 50px;
  position: absolute;
}

<div class="wrapper">
  <div id="winLine"></div>
  <table>
    <tr>
      <td id="0"></td>
      <td id="1"></td>
      <td id="2"></td>
    </tr>
    <tr>
      <td id="3"></td>
      <td id="4"></td>
      <td id="5"></td>
    </tr>
    <tr>
      <td id="6"></td>
      <td id="7"></td>
      <td id="8"></td>
    </tr>
  </table>
</div>

Answer 2

div元素不能是table元素的子元素。它是无效的HTML。

就table元素的允许内容而言，这里是规范中的相关语言：

按此顺序：可选择caption元素，后跟零或更多元素   随后是colgroup个元素，后跟可选的thead元素   可选地由tfoot元素，后跟零或更多tbody   元素或一个或多个tr元素，后面可选tfoot   element（但总共只有一个tfoot元素子元素），   可选地与一个或多个脚本支持元素混合。

^{来源：https://www.w3.org/TR/html5/tabular-data.html#the-table-element}

所以，不允许使用div。因此，浏览器强制表元素在 div之后启动。

这是Chrome中发生的事情（通过开发工具）：

绝对定位的div现在相对于初始包含块（html元素）定位，并且与视口的左边缘偏移50px。

相反，请考虑使用伪元素来构建您的行：

table { height: 450px; width: 450px; left: 50%; transform: translateX(-50%); text-align: center; table-layout: fixed; position: relative; border: 2px dashed red; } table::before { height: 100%; width: 0px; border: 4px solid blue; border-radius: 10px; left: 50px; position: absolute; content: ""; }

<table> <tr> <td id="0"></td> <td id="1"></td> <td id="2"></td> </tr> <tr> <td id="3"></td> <td id="4"></td> <td id="5"></td> </tr> <tr> <td id="6"></td> <td id="7"></td> <td id="8"></td> </tr> </table>

表内绝对定位的div未正确对齐

2 个答案: