Building a seatmap with kind of wings for the plane

Question

I have to build a seatmap for planes, using only HTML, CSS and jQuery. In general that's no problem, but I don't know how to add wings to the plane. Currently I mark the seats (which are placed over the wings) with a darker outside border. But this is not nice. I would like to add kind of "wings" to the plane itself where they have to be. Or, if not wings-style, at least there should be a border on the "plane outside". Any ideas how to do this?

<div id="seatmap">
    <div id="plane">
        <table class="rows">
        <tr>
            <td>F</td>
        </tr>
        <tr>
            <td>D</td>
        </tr>
        <tr>
            <td></td>
        </tr>
        <tr>
            <td>C</td>
        </tr>
        <tr>
            <td>A</td>
        </tr>
        </table>

        <div id="cabin">        
            <table>
            <tr>
                <td title="1F" class="seatAvailable"></td>
                <td title="2F" class="seatUnavailable"></td>
                <td title="" class="noSeatGalley"></td>
                <td title="4F" class="ExtraPay"></td>
                <td title="5F" class="seatAvailable wingSeat"></td>
                <td title="6F" class="seatUnavailable wingSeat"></td>
                <td title="7F" class="seatAvailable wingSeat"></td>
                <td title="8F" class="noSeatStorage wingSeat"></td>
                <td title="9F" class="seatAvailable"></td>
                <td title="10F" class="seatAvailable"></td>
                <td title="11F" class="seatAvailable LargeSeat"></td>
            </tr>
            <tr>
                <td title="1D" class="seatAvailable"></td>
                <td title="2D" class="seatUnavailable"></td>
                <td title="" class="noSeatGalley"></td>
                <td title="4D" class="ExtraPay"></td>
                <td title="5D" class="seatAvailable"></td>
                <td title="6D" class="seatUnavailable"></td>
                <td title="7D" class="seatAvailable"></td>
                <td title="8D" class="noSeatStorage"></td>
                <td title="9D" class="seatAvailable"></td>
                <td title="10D" class="seatAvailable"></td>
                <td title="11D" class="seatAvailable ExtraPay LargeSeat"></td>
            </tr>
            <tr>
                <td class="noSeatGalley">1</td>
                <td class="noSeatGalley">2</td>
                <td class="noSeatGalley"></td>
                <td class="noSeatGalley">4</td>
                <td class="noSeatGalley">5</td>
                <td class="noSeatGalley">6</td>
                <td class="noSeatGalley">7</td>
                <td class="noSeatGalley">8</td>
                <td class="noSeatGalley">9</td>
                <td class="noSeatGalley">10</td>
                <td class="noSeatGalley">11</td>
            </tr>
            <tr>
                <td title="1C" class="seatAvailable"></td>
                <td title="2C" class="seatAvailable"></td>
                <td title="" class="noSeatGalley"></td>
                <td title="4C" class="ExtraPay"></td>
                <td title="5C" class="seatUnavailable"></td>
                <td title="6C" class="seatAvailable"></td>
                <td title="7C" class="seatAvailable"></td>
                <td title="8C" class="noSeatLavatory"></td>
                <td title="9C" class="seatAvailable"></td>
                <td title="10C" class="seatAvailable"></td>
                <td title="11C" class="seatAvailable ExtraPay LargeSeat"></td>
            </tr>
            <tr>
                <td title="1A" class="seatAvailable"></td>
                <td title="2A" class="seatAvailable"></td>
                <td title="" class="noSeatGalley"></td>
                <td title="4A" class="ExtraPay"></td>
                <td title="5A" class="seatUnavailable wingSeat"></td>
                <td title="6A" class="seatAvailable wingSeat"></td>
                <td title="7A" class="seatAvailable wingSeat"></td>
                <td title="8A" class="noSeatLavatory wingSeat"></td>
                <td title="9A" class="seatAvailable"></td>
                <td title="10A" class="seatAvailable"></td>
                <td title="11A" class="seatUnavailable ExtraPay LargeSeat"></td>
            </tr>
            </table>            
        </div>
        <div style="clear: both;"></div>
    </div>
</div>

Fiddle 1: http://jsfiddle.net/SchweizerSchoggi/0Lu4vspq/1/

OK, I have another Fiddle, a bit updated. Here we have a better idea of where the wings are (or should be) -> Fiddle 2: http://jsfiddle.net/SchweizerSchoggi/0Lu4vspq/3/

The problem still is, that I want the border on the outside of the plane, not inside the cabin.

Answer 1

This is my solution, with a CSS for the two wings:

http://jsfiddle.net/0Lu4vspq/6/

#wings {
    border: solid 5px #333;
    width: 80px;
    position: relative;
    left: 155px;
}

And

<div id="wings"></div>

Before and after your code.

UPDATE

You can edit dynamically the CSS via PHP. You need a different value but in a plane there are only two wings.

If there position are the same (or not, you can use two CSS codes for wing left and wing right) you have only to find the point where the wing start and its length.

At this point the CSS change in this two points:

#wings {
    border: solid 5px #333;
    width: 80px;   % <-- Length the wing
    position: relative;
    left: 153px;   % <-- Where the wing start
}

SECOND UPDATE

If you would like something more like a wing, the CSS will be:

#wings_down {
    left: 155px;
    width: 80px;
    position: relative;
    height: 50px;
    -webkit-transform: skew(20deg);
       -moz-transform: skew(20deg);
         -o-transform: skew(20deg);
    transform: skew(20deg);
    background: #333;
}

#wings_up {
    left: 155px;
    width: 80px;
    position: relative;
    height: 50px;
    -webkit-transform: skew(-20deg);
       -moz-transform: skew(-20deg);
         -o-transform: skew(-20deg);
    transform: skew(-20deg);
    background: #333;
}

http://jsfiddle.net/0Lu4vspq/17/

Note: I have removed border: solid 5px #333; because it is redundant.