简体   繁体   中英

How to align this Table to make all <TD>s correctly aligned

How can I align all table rows come correctly aligned even if they have content length differences. Here is the fiddle. Please have a look at this.. They are coming vertically aligned.. But I want them one after another like below

One  1  Yes
Two  2
Three

http://jsfiddle.net/cKj98/1/

vertical-align: top;

?

Do something like this:

<table>  
    <tr>  
        <td width="50px">  
            One  
        </td>  
        <td>  
            1  
        </td>  
        <td>  
            Yes  
        </td>  
    </tr>  
    <tr>  
        <td width="50px">  
            Two  
        </td>  
        <td colspan="2">  
            2  
        </td>  
    </tr>  
    <tr>  
        <td colspan="3">  
            Three  
        </td>  
    </tr>  
</table>

Good ways to style the table cells are: "padding", "text-align", vertical-align", "height", "width", and so on..

This might be what you seek

<table>
    <tr>
    <td>
    One
    </td>
    <td>
    1
    </td>
    <td>
    Yes
    </td>
    </tr>
    <tr>
    <td>
    Two
    </td>
    <td colspan='2'>
    2
    </td>
    </tr>
    <tr>
    <td colspan='3'>
    Three
    </td>
    </tr>
    <table>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM