1

我在设计一些网页时遇到了一种特殊的表格样式。该表将是一个静态表。但是我无法使用 css 复制给定样式。我尝试在每个单元格上使用高度、宽度属性，它们会调整整个表格的大小。如果有人知道如何获得这种类型的输出，请帮助我.. 我尝试用谷歌搜索 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>

菲德尔可以在这里找到！

4

2 回答 2

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>

点击这里进行演示

于 2013-08-31T11:51:58.403 回答
0

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

<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>
于 2013-08-31T10:29:12.050 回答