Question

我正在尝试创建一个客户端可以通过网络完成的表单，到目前为止，我已经使用各种表格互相对接来获取我正在寻找的视图，其中一个问题是当表格彼此相邻时，边框的厚度会增加两倍。

我想我可能会打开和关闭某些边界，但这会很难管理，我应该采取更好的方式吗？

我的表单看起来像这样（jsfiddle在http://jsfiddle.net/5AXKa/）

<html>
<head>
<style type="text/css">
    #form table
    { 

        width:100%;
    }

    td
    {
        border: 1px solid black;

    }

    table
    {
        border:1px solid black;
    }

    #form
    {
        width:1000px;
        /*border:1px solid black;*/
    }

    .field
    {
        border-right:none;
    }

    table, tr, td
    {
        border-collapse:collapse;
    }

    #Logo
    {
        width:30%;
    }

    #TestName
    {
        width:40%;
    }

    #TestNumber
    {
        width:30%;
    }

    #heading
    {
        height:70px;
    }

    .title
    {
        text-align:center;
    }

    .Data
    {
        border-left:none;
        border-right:none;
    }

</style>
</head>
<body>
    <div id="form">

        <table>
            <tr id="heading">
                <td id="Logo">LOGO GOES HERE</td>
                <td id="TestName">TEST NAME</td>
                <td id="TestNumber">TEST NUMBER</td>
            </tr>   
        </table>

        <table id="CommonData">
            <tr>
                <td class="field">CLIENT:-</td>
                <td class="data"></td>
                <td class="field">SITE:-</td>
                <td class="data"></td>
                <td class="field">Contract NO:-</td>
                <td class="data"></td>
            </tr>
            <tr>
                <td class="field">DUTY:-</td>
                <td class="data"></td>
                <td class="field">TAG No:-</td>
                <td class="data"></td>
                <td class="field">Loop No:-</td>
                <td class="data"></td>
            </tr>
            <tr>
                <td class="field">SYSTEM No:-</td>
                <td class="data"></td>
                <td class="field">SYSTEM REF:-</td>
                <td class="data"></td>
                <td class="field">DWG No:-</td>
                <td class="data"></td>
            </tr>
            <tr>
                <td class="field">CTP No:-</td>
                <td class="data"></td>
                <td colspan="4"></td>
            </tr>       
        </table>
        <table>
            <tr class="title">
                <td>INSTRUMENT / APPLIANCE</td>
            </tr>
        </table>
        <table style="float:left;width:50%">
            <tr>
                <td colspan="2">INSTRUMENT DETAILS:</td>
            </tr>
            <tr>
                <td>MANUFACTURER</td>
                <td><input type="text" name="blah" style="width:100%"/></td>
            </tr>
            <tr>
                <td>SERIAL No:-</td>
                <td><input type="text" name="blah" style="width:100%"/></td>
            </tr>       
            <tr>
                <td>SIZE:-</td>
                <td><input type="text" name="blah" style="width:100%"/></td>
            </tr>
            <tr>
                <td>SERVICE DATA SHEET REF:-</td>
                <td><input type="text" name="blah" style="width:100%"/></td>
            </tr>
            <tr>
                <td>POWER SUPPLY:-</td>
                <td><input type="text" name="blah" style="width:100%"/></td>
            </tr>
            <tr>
                <td>MODEL NO:-</td>
                <td><input type="text" name="blah" style="width:100%"/></td>
            </tr>
            <tr>
                <td>IP RATING:-</td>
                <td><input type="text" name="blah" style="width:100%"/></td>
            </tr>
            <tr>
                <td>RANGE/SPAN</td>
                <td><input type="text" name="blah" style="width:100%"/></td>
            </tr>
        </table>
        <table style="float:right; width:50%">
            <tr>
                <td>INSTRUMENT TYPE</td>
                <td>TICK BOX</td>
            </tr>
            <tr>
                <td>PROXIMITY SWITCH</td>
                <td><input type="text" name="blah" style="width:100%"/></td>
            </tr>
            <tr>
                <td>LIMIT SWITCH</td>
                <td><input type="text" name="blah" style="width:100%"/></td>
            </tr>
            <tr>
                <td>FLOAT SWITCH</td>
                <td><input type="text" name="blah" style="width:100%"/></td>
            </tr>
            <tr>
                <td>ULTRASONIC</td>
                <td><input type="text" name="blah" style="width:100%"/></td>
            </tr>
            <tr>
                <td>THERMOCOUPLE</td>
                <td><input type="text" name="blah" style="width:100%"/></td>
            </tr>
            <tr>
                <td>PRESSURE SWITCH</td>
                <td><input type="text" name="blah" style="width:100%"/></td>f
            </tr>
            <tr>
                <td>TEMPERATURE SWITCH</td>
                <td><input type="text" name="blah" style="width:100%"/></td>
            </tr>
            <tr>
                <td>FLOW SWITCH</td>
                <td><input type="text" name="blah" style="width:100%"/></td>
            </tr>
            <tr>
                <td>CONDUCITIVITY METER</td>
                <td><input type="text" name="blah" style="width:100%"/></td>
            </tr>
            <tr>
                <td>TURBIDITY METER</td>
                <td><input type="text" name="blah" style="width:100%"/></td>
            </tr>
            <tr>
                <td>CHEMICAL RESIDUAL ANALYSER</td>
                <td><input type="text" name="blah" style="width:100%"/></td>    
            </tr>
            <tr>
                <td>FLOW METER</td>
                <td><input type="text" name="blah" style="width:100%"/></td>
            </tr>
            <tr>
                <td>PH METER</td>
                <td><input type="text" name="blah" style="width:100%"/></td>
            </tr>   
        </table>
        <table>
            <tr class="title">
                <td>MONITOR / CONVERTER</td>
            </tr>
        <table>
        <table>
            <tr>
                <td>PLANT UNIT:-</td>
                <td><input type="text" name="blah" style="width:100%"/></td>
                <td>INSTRUMENT TYPE:-</td>
                <td><input type="text" name="blah" style="width:100%"/></td>
            </tr>
            <tr>
                <td>SERIAL No:-</td>
                <td><input type="text" name="blah" style="width:100%"/></td>
                <td>SPAN:-</td>
                <td><input type="text" name="blah" style="width:100%"/></td>
            </tr>
            <tr>
                <td>POWER SUPPLY:-</td>
                <td><input type="text" name="blah" style="width:100%"/></td>
                <td>OTHER:-</td>
                <td><input type="text" name="blah" style="width:100%"/></td>
            </tr>
        <table> 
</body>
</html>

Answer 1

您可以使用div并指定div周围的边距，而不是使用一堆具有单个div的表。

Answer 2

这是一个开始。

为每列使用fieldset。将每个label和input放入div。

CSS：

fieldset {
    float: left;
}
label {
    clear: both; // Start the label at a new line
    display: block;
    float: left;
    width: 100px;
{
input {
    display: block;
    float: left;
}

HTML：

<div><label for="field1">Field1</label><input type="text" name="field1" id="field1" /></div>
<div><label for="field1">Field2</label><input type="text" name="field2" id="field2" /></div>

等...

Answer 3

简化您的表格结构。如果可能的话，使用一个表，一行中有一个项目 - 在设计Web表单时通常不需要模拟打印的表单（您尝试将所有内容放在一张纸上）。不要使用全部大写，并将标题项放在粗体中以阐明表单的结构。不要为单元格设置宽度 - 这是使用表的基本好处的一部分，您可以将宽度分配给浏览器。

你的边界问题只是设计过于复杂的一个症状。使用单个表时，如果只在cellspacing=0标记中设置table或在CSS中设置border-collapse: collapse，则相邻的浏览器会崩溃。

在html中编写表格形式

3 个答案: