Position absolute not working when used inside table cell

Question

I have a container which has position: relative and overflow: hidden

There's one table inside it and out of its many rows where I have placed a span which is absolutely positioned and the left of the span is given to something which is more than the width of the container.

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

The CSS for this is:

       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%;
        }

When the span is simply placed inside a div, and although the overflow to the div is hidden, the span is still showing up.

But as soon as I place a table inside the div and then place this span inside one of the td's, it stops working.

Any help will be appreciated.

Code for Div that is working fine:

   <div> 
       <span></span>
   </div>

Rest of the CSS remains as it is.

PS:

1. I need to use the table in any case.
2. If you want to see the demo of the div that is working, please see that in your local because that fiddle has table inbuilt, hence the code wont work there.

I've created a demo fiddle for this.

Answer 1

Please check the JSFIDDLE link. I updated your code based on your requirement.

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%;
}

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