html - 复杂表格表格与div

我在网上寻找了使用DIV实现表格的示例，而我所看到的只是一列简单的表格。我有一些非常复杂的表格，下面是一张图片:

http://img835.imageshack.us/img835/8292/formn.jpg

使它与表一起使用很容易(我可以这样做)，我唯一的问题是，有时候我不需要显示某些选择并将值上移一排，以避免出现间隙。

我开始使用div制作一些表单，但是当我更改浏览器窗口大小时，它们会崩溃，并且对齐内容并不容易。

本主题很有帮助:
Is it bad design to use table tags when displaying forms in html?
但这并不能解决我所担心的一些问题。

您将提出什么解决方案？我可以在表中动态删除/插入值或尝试执行DIV。

最佳答案

我会去div路线。只要您在应用 float 字体时注意宽度，实际上就很容易使布局在不同的屏幕分辨率下正常工作。

以下是一些规则:

在表单或表单的包装器元素上设置最大宽度。如果要将元素 float 在一行上，请确保将元素的宽度加在一起不超过此宽度。

如果要向 float 元素添加水平填充/边距，请记住，这些元素会增加元素的总宽度。

避免将百分比宽度与像素填充和边距混合使用。将百分比宽度应用于父元素，并将像素填充/边距应用于子元素。

在元素行之间使用清除元素以使所有内容保持一致。

至于标记，您可以将表单元素与CSS一起使用来创建语义结构:

<fieldset>
    <legend>Fieldset Title</legend>

    <label for="input1">Input 1:</label>
    <span><input type="text" id="input1" name="input1"/></span>
    <label for="input2">Input 2:</label>
    <span><input type="text" id="input2" name="input2"/></span>

    <br/>

    <label for="input3">Input 3:</label>
    <span><input type="text" id="input3" name="input3"/></span>
    <label for="input4">Input 4:</label>
    <span><input type="text" id="input4" name="input4"/></span>
</fieldset>

和CSS:

fieldset {
    padding: 20px 0;
    width: 600px;
    margin: 0;
    border: 0;
}

legend {
    display: block;
    width: 100%;
    background: black;
    color: white;
}

label, span{
    float: left;
    width: 150px;
}

input {
    width: 120px;
}

br {
    clear: both;
}

您可以see the result here。

关于html - 复杂表格表格与div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/3561569/