html - 在表格中居中不均匀行

Question

我有一张有两行的桌子；一个有 5 个定义，一个有 4 个。有没有办法让第二行位于列不对齐的第一行的中心？

<table class="productBrowserTableControllerType" id="productBrowserTableControllerType" border="1">
    <tr>
        <td>Standard Solenoid</td>
        <td>"Classic" Solenoid</td>
        <td>Manual Lever</td>
        <td>Palm Button</td>
        <td>Foot Pedal/Treadle</td>
    </tr>
    <tr>
        <td>Cam Roller</td>
        <td>Piston</td>
        <td>Remote Pilot</td>
        <td>Differential Pilot</td>
    </tr>
</table>

Answer 1

将第二行包装在另一个表中，并将整个东西放入一个<td>像这样的 colspan 为 5 的表中......

http://jsfiddle.net/FzUhA/1/

    <tr>
        <td>Standard Solenoid</td>
        <td>"Classic" Solenoid</td>
        <td>Manual Lever</td>
        <td>Palm Button</td>
        <td>Foot Pedal/Treadle</td>
    </tr>
    <tr>
       <td colspan = "5" align="center">
           <table><tr>
           <td>Cam Roller</td>
           <td>Piston</td>
           <td>Remote Pilot</td>
           <td>Differential Pilot</td>
           </tr>
           </table>
         </td>
    </tr>

Answer 2

这会将第二行移动到中心，它在左侧和右侧具有相等的间距。见小提琴

<table class="productBrowserTableControllerType" id="productBrowserTableControllerType" border="1">
    <tr>
        <td colspan="2">Standard Solenoid</td>
        <td colspan="2">"Classic" Solenoid</td>
        <td colspan="2">Manual Lever</td>
        <td colspan="2">Palm Button</td>
        <td colspan="2">Foot Pedal/Treadle</td>
    </tr>
    <tr>
        <td></td>
        <td colspan="2">Cam Roller</td>
        <td colspan="2">Piston</td>
        <td colspan="2">Remote Pilot</td>
        <td colspan="2">Differential Pilot</td>
        <td></td>
    </tr>
</table>