Html 带翅膀的座位地图-重新开放

昨天我问了一个解决方案，画一种飞机的机翼（用于座位地图）。这个问题（及其“解决方案”）可以在这里找到：

我们找到了一个解决方案，但现在我看到了下一个问题：只要内容足够小，机舱不能滚动，就可以了。但一旦我有这么多的座位排，以至于内容开始滚动，翅膀就必须随着座位一起移动。他们不应该呆在原来的地方，因为客户知道他的座位是否在飞机机翼上方是很重要的

参见小提琴：

E
D
C
A.
[...]

Thx的任何想法如何使翅膀更灵活（滚动）！！

---

请注意，平面的尺寸不是固定的，一个平面可以有更多或更少的行。

我认为您无法使用当前代码创建该形状，因为您在父平面上隐藏了溢出。你可能必须完全重新设计它。

我建议使用伪元素。你能给我解释一下吗？你的意思是什么？伪效果可以放置在你想要的元素上（并根据父元素的位置）-嗯，我的平面必须用表格构建并且是景观。请查找伪元素-你可以指定它们相对于“真实”元素出现的位置

<div id="seatmap">
    <div id="plane">

        <table class="rows">
            <tr><th>E</th></tr>
            <tr><th>D</th></tr>
            <tr><th></th></tr>
            <tr><th>C</th></tr>
            <tr><th>A</th></tr>
        </table>


        <div id="cabin">        
            <table>
            <tr class="wingRowTop">
                <td class="noSeatGalley"></td>
                <td class="noSeatGalley"></td>
                <td class="noSeatGalley"></td>
                <td class="noSeatGalley"></td>
                <td class="wingSeat"></td>
                <td class="wingSeat"></td>
                <td class="wingSeat"></td>
                <td class="wingSeat"></td>
                <td class="wingSeat"></td>
                <td class="noSeatGalley"></td>
                <td class="noSeatGalley"></td>
                <td class="noSeatGalley"></td>
                <td class="noSeatGalley"></td>
                <td class="noSeatGalley"></td>
                <td class="noSeatGalley"></td>
                <td class="noSeatGalley"></td>
                <td class="noSeatGalley"></td>
                <td class="noSeatGalley"></td>
                <td class="noSeatGalley"></td>
                <td class="noSeatGalley"></td>
                <td class="noSeatGalley"></td>
            </tr>
[...]