Html 防止滚动的内容显示在表的边框中

.container {
        overflow-x: auto;
        width: 250px;
    }

    table {
        border-collapse: collapse;
    }

    td {
      padding: 10px;
    }

    th {
        background-color: red;
        color: white;
        padding: 10px;
        position: relative;
    }

    tr {
      border-bottom: 1px solid white; 
    }

    .sticky {
        background-color: blue;
        color: white;
        position: sticky;
        z-index: 2;
    }

    .sticky::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 2px;
        height: 100%;
        background-color: white;
    }
    .sticky::after {
        content: "";
        position: absolute;
        bottom: -4px;
        left: 0;
        height: 4px;
        width: 100%;
        background-color: yellow;
    }

    .test1 {
        left: 0;
    }

    .test2 {
        left: 55.86px;
    }

    .test3 {
        left: calc(55.86px * 2);
    }

    .popover-container {
      position: relative
    }

    .popover {
      background-color: green;
      color: white;
      height: 40px;
      position: absolute;
      top: 10px;
      left: -12px;
      z-index: 1;
    }

<div class="container">
        <table>
            <thead>
                <tr>
                    <th class="sticky test1">
                        Test1
                    </th>
                    <th class="sticky test2">
                        Test2
                    </th>
                    <th class="sticky test3">
                        Test3
                    </th>
                    <th>
                        Test4
                    </th>
                    <th>
                        Test5
                    </th>
                    <th>
                        Test6
                    </th>
                </tr>
            </thead>
            <tbody>
              <tr>
                <td class="sticky test1">
                test1
                </td>
                <td class="sticky test2">
                test2
                </td>
                <td class="sticky test3">
                test3
                </td>
                <td>
                test4
                </td>
                <td>
                test5
                </td>
                <td>
                test6
                </td>
              </tr>
              <tr>
                <td class="sticky test1">
                test1
                </td>
                <td class="sticky test2">
                test2
                </td>
                <td class="sticky test3">
                test3
                </td>
                 <td>
                test4
                </td>
                <td>
                  <div class="popover-container">
                    test5
                    <div class="popover">
                      popover
                    </div>
                  </div>
                </td>
                <td>
                test6
                </td>
              </tr>
              <tr>
                <td class="sticky test1">
                test1
                </td>
                <td class="sticky test2">
                test2
                </td>
                <td class="sticky test3">
                test3
                </td>
                <td>
                test4
                </td>
                <td>
                test5
                </td>
                <td>
                test6
                </td>
              </tr>
            </tbody>
        </table>
    </div>