html - 带有翅膀的座位图 - 重新开放

Question

昨天我问了一个解决方案，可以在飞机上画出某种翅膀(用于座位图)。这个问题(和它的“解决方案”)可以在这里找到: Building a seatmap with kind of wings for the plane

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

参见 fiddle : http://jsfiddle.net/SchweizerSchoggi/0Lu4vspq/26/

<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>
[...]

谢谢任何关于如何使翅膀更灵活(可滚动)的想法!!请注意，平面的尺寸不是固定的，一个平面可以有更多或更少的行。

Answer 1

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