Pure css table styling

Question

Im designing some web pages and came across a purticular table style. This table is going to be a static table. But I'm unable to replicate the give style using css. I tried using height, width properties on each cell bt they kind of resize the entire table. if any one know how to get this type of output, please help me.. I tried googling bt there were no good tutorials.

example :

table{
                border-collapse: separate;
                border-spacing: 4px;
                margin: 26px auto;
            }
            .header-cell{
                width: 107px;
                height: 66px;
                text-align: center;
                background-color: #788fc9;
                margin: 1.5px;
                font-family: verdana;
                font-size: 18px;
                font-weight: bold;
                text-shadow: 0px 0px 4px white;
                display: table-cell;
                vertical-align: middle;
            }
            .data-cell{
                width: 107px;
                height: 66px;
                background-color: #6376a7;
                text-align: center;
                font-family: verdana;
                font-size: 18px;
                font-weight: bold;
                display: table-cell;
                vertical-align: middle;
                color: #FFFFFF;
            }


<table class="wireless-table">
                            <tbody>
                                <tr>
                                    <td class="header-cell">PLAN</td>
                                    <td class="header-cell">PRICE</td>
                                    <td class="header-cell">MONTHLY</td>
                                </tr>
                                <tr>
                                    <td class="header-cell">250MB</td>
                                    <td class="data-cell">$10</td>
                                    <td class="data-cell">$0.05/MB</td>
                                </tr>
                                <tr>
                                    <td class="header-cell">500MB</td>
                                    <td class="data-cell">$20</td>
                                    <td class="data-cell">$0.05/MB</td>
                                </tr>
                                <tr>
                                    <td class="header-cell">1GB</td>
                                    <td class="data-cell">$30</td>
                                    <td class="data-cell">$0.05/MB</td>
                                </tr>
                                <tr>
                                    <td class="header-cell">2GB</td>
                                    <td class="data-cell">$40</td>
                                    <td class="data-cell">$0.05/MB</td>
                                </tr>
                                <tr>
                                    <td class="header-cell">3GB</td>
                                    <td class="data-cell">$50</td>
                                    <td class="data-cell">$0.05/MB</td>
                                </tr>
                            </tbody>
                        </table>

fiddel can be found here!

Answer 1

you can try creating this using div

Hope This Helps

<div id="main">
    <div id="colum1">
        <div class="data0">Data 1</div>
        <div class="data0">Data 2</div>
        <div class="data0">Data 3</div>
    </div>
    <div id="colum2">
        <div class="data1">Data 1</div>
        <div class="data1">Data 2</div>
        <div class="data1">Data 3</div>
        <div class="data1">Data 4</div>
        <div class="data1">Data 5 </div>
    </div>
    <div id="colum3">
        <div class="data2">Data 1</div>
        <div class="data2">Data 2</div>
        <div class="data2">Data 3</div>
    </div>  
</div>

Click Here for Demo

Answer 2

Better you div for this style.
If you want table, make design like this.
By default the inner tables ( having different heights ) will look similar to one you want.

<table> 
    <tr> 
        <td> 
            <table height="x" style="background:">
                <tr><td>Row 1</td> </tr>
                <tr><td>Row 1</td> </tr>
                <tr><td>Row 1</td> </tr>
                <tr><td>Row 1</td> </tr>
            </table>
        </td>
        <td> 
            <table height="y" style="background:">
                <tr><td>Row 1</td> </tr>
                <tr><td>Row 1</td> </tr>
                <tr><td>Row 1</td> </tr>
                <tr><td>Row 1</td> </tr>
            </table>
        </td>
    </tr>
</table>