在表格单元格内使用时，绝对不能正常工作

Question

我有一个容器int cnt = 0; for(auto it=container.begin(); it != container.end() && cnt < N ; ++it,++cnt) { // } 和position: relative

里面有一张桌子，在我的许多行中，我放置了一个绝对定位的 span ，并且跨度的左边给出的东西大于容器的宽度

overflow: hidden

这个的CSS是：

     <div>
        <table border="1">
            <tr>
               <td><span></span></td>
            </tr>
        </table>
    </div>

当跨度简单地放在 div 中时，虽然div的溢出被隐藏，但是跨度仍在显示。

但是只要我在div中放置一个表然后将这个跨度放在其中一个td中，它就会停止工作。

任何帮助将不胜感激。

Div的代码正常工作：

       div{
            position: relative;
            width: 300px;
            height: 300px;
            border: 2px solid red;
            overflow: hidden;
        }
        span{
            position: absolute;
            left: 380px;
            width: 30px;
            height: 30px;
            border: 1px solid green;
        }
        table{
            border-collapse: collapse;
        }
        tr{
            width: 150px;
            height: 20px;
        }
        td{
            padding: 5px;

            width: 100%;
        }

其余的CSS保持不变。

PS：

1. 无论如何我都需要使用该表。
2. 如果你想看看有效的div的演示，请在你的本地看到，因为那个小提琴有内置表，因此代码不会在那里工作。

我为此创建了一个演示fiddle。

Answer 1

请查看JSFIDDLE链接。我根据您的要求更新了您的代码。

＆＃13;

＆＃13;

div {
  position: relative;
  width: 300px;
  height: 300px;
  border: 2px solid red;
  overflow: hidden;
}
td {
  position: relative;
}
span {
  position: absolute;
  left: 0px;
  right: 0;
  top: 0;
  bottom: 0;
  /* width: 30px; */
  /* height: 30px; */
  border: 1px solid green;
}
table {
  border-collapse: collapse;
}
tr {
  width: 150px;
  height: 20px;
}
td {
  padding: 5px;
  width: 100%;
}

＆＃13;

<div>
  <table border="1">
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td><span></span>
      </td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>

  </table>
</div>

＆＃13;

＆＃13;

＆＃13;