html - 使用创建表格布局宽度和高度为百分比

Question

如何仅通过将宽度和高度参数作为百分比而不是像素传递来在 HTML 中创建表格布局，以便它在所有浏览器中都一样工作？另外请建议一些好的材料或链接，我可以在其中找到所需的格式用于完成此任务的属性及其值。感谢早期回复。

Answer 1

检查这个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>

Answer 2

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

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