CODEWITHSUNDEEP
htmlhtml-table
jwomack
jwomack

Reputation: 13

Center uneven row in table

I have a table with two rows; one with 5 definitions and one with 4. Is there anyway to get the second row to be in the center of the top row where the columns don't line up?

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

Upvotes: 1

Views: 1077

Answers (2)

Yevgeny Simkin
Yevgeny Simkin

Reputation: 28359

wrap the second row in another table and put the whole thing into one <td> that has a colspan of 5 like this...

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>

Upvotes: 1

Arjan
Arjan

Reputation: 9874

This moves the second row to the center, it has equal spacing on the left and the right side. See fiddle

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

Upvotes: 0

Related Questions