纯css表造型

Question

我正在设计一些网页，并且遇到了一种特殊的桌面风格。该表将是一个静态表。但是我无法使用css复制给定样式。我尝试在每个单元格上使用高度，宽度属性，它们会调整整个表格的大小。如果有人知道如何获得这种类型的输出，请帮助我..我试过googling bt没有很好的教程。

示例：

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可以找到here!

Answer 1

你可以尝试使用div

创建它

希望这有助于

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

点击此处查看Demo

Answer 2

最好你喜欢这种风格。
如果你想要桌子，那就做这样的设计 默认情况下，内部表（具有不同的高度）看起来与您想要的相似。

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