CODEWITHSUNDEEP
htmlcss
Adjit
Adjit

Reputation: 10305

HTML table with extended column

I am not really sure if there is a way to do this, and as of now I am thinking I will just make a separate element with absolute positioning and place it in the proper position.

This is what I would like to do with the table... Is it even possible? Right now I have the table that you can see part of to the right, but I was just trying to think of a way to do this.

extended column

I have a normal table layout as of now: But take a look at the fiddle: http://jsfiddle.net/W3Tvm/

I guess the main challenge will be trying to keep the border-radius

<table class="overviewTable">
            <thead>
                <tr>
                    <th colspan="5">
                        FAN FREE TERMINALS</th>
                </tr>
            </thead>
            <thead class="posiOverviewPN">
                <tr>
                    <th class="txHeader">
                        TX4200E</th>
                    <th class="ksHeader">
                        KS6700</th>
                    <th class="ksHeader">
                        KS7200</th>
                    <th class="ksHeader">
                        KS7500</th>
                    <th class="ksHeader">
                        KS7700</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <img height="68px" src="../posiflex/images/tx-4200.png" width="120px"></td>
                    <td>
                        <img height="108px" src="../posiflex/images/ks6700.png" width="120px"></td>
                    <td>
                        <img height="109px" src="../posiflex/images/ks7200.png" width="120px"></td>
                    <td>
                        <img height="117px" src="../posiflex/images/ks7500.png" width="120px"></td>
                    <td>
                        <img height="119px" src="../posiflex/images/ks7700.png" width="120px"></td>
                </tr>
            </tbody>
        </table>

Upvotes: 0

Views: 212

Answers (1)

Douglas Denhartog
Douglas Denhartog

Reputation: 2054

I believe what you are wanting to do is basic table structuring: http://jsfiddle.net/9VULt/

All you need to do is have empty th/td cells:

<table>
    <thead>
        <tr>
            <th><!--empty--></th>
            <th>TX42</th>
        </tr>
        <tr>
            <th><!--empty--></th>
            <th>image</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Advantage</td>
            <td>Industrial grade...</td>
        </tr>
    </tbody>
</table>

Upvotes: 1

Related Questions