使用宽度为&amp;的<div>创建表格布局身高百分比</div>

时间:2012-05-09 04:05:48

标签: html

如何通过传递宽度和宽度来使用HTML创建表格布局高度参数为百分比,而不是像素,以便它在所有浏览器中的工作方式相同?还请提供一些好的材料或链接,我可以找到所需属性的格式&amp;他们的价值观用于完成这项任务。早期的回复表示赞赏。

2 个答案:

答案 0 :(得分:4)

选中此http://jsfiddle.net/nalaka526/hUFh4/6/

<强> CSS

.divTable
{
    width: 50%;
    height: 50%;
    display: table;
}

.divTableRow
{
    width: 100%;
    height: 100%;
    display: table-row;
}

.divTableCell
{
    width: 25%;
    height: 100%;
    display: table-cell;
}

<强> HTML

<div class="divTable">
        <div class="divTableRow">
            <div class="divTableCell">
                H1
            </div>
            <div class="divTableCell ">
                H2
            </div>
            <div class="divTableCell ">
                H3
            </div>
            <div class="divTableCell ">
                H4
            </div>
        </div>
        <div class="divTableRow">
            <div class="divTableCell">
                a
            </div>
            <div class="divTableCell ">
                b
            </div>
            <div class="divTableCell ">
                c
            </div>
            <div class="divTableCell ">
                d
            </div>
        </div>
</div>

答案 1 :(得分:0)

我不完全确定你在问什么。你想要一个流畅的<table>布局吗?下面是流体布局的一个非常基本的例子。请记住,该表只会与它所在的容器一样宽。

<table width="100%" height="100%">
    <tr width="25%" height="100%">
        <td></td>
    </tr>
    <tr width="75%" height="100%">
        <td></td>
    </tr>
</table>