带有扩展列的HTML表

Question

我不确定是否有办法做到这一点，到目前为止，我想我只是制作一个具有绝对定位的独立元素并将其置于正确的位置。

这就是我想用桌子做的事情......它甚至可能吗？现在我有一张桌子，你可以看到右边的一部分，但我只是想办法做到这一点。

我现在有一个正常的表格布局：但是看看小提琴：http://jsfiddle.net/W3Tvm/

我猜主要的挑战是试图保留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>

Answer 1

我相信你想要做的是基本的表格结构：http://jsfiddle.net/9VULt/

您需要做的就是拥有空的th / td单元格：

<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>