Question

我很难并排尝试两张桌子。我为他们两个尝试了float:left但仍然没有工作。此外，我无法减少第二列和第三列的宽度。有人可以用给出的代码帮助我：

<div class="variablecosts">
        <!-- VARIABLE COSTS FORM STARTS HERE  -->
        <form style="float:left;display:inline-block;" action="post" name="varcosts">
            <table id = "variable_cost" border="1" >
                <tr>
                    <th>RESP</th>
                    <th>MCSS</th>
                    <th>COH</th>
                </tr>
                <tr>
                    <td>3R00 (Mech. Services)</td>
                    <td><input type="text" name="" /> </td>
                    <td><input type="text" name="" /> </td> 
                </tr>

                <tr>
                    <th>Total</th>
                    <th>some value </th>
                    <th>some value </th>    
                </tr>
            </table>
            </form>




            <form style="float:left;display:inline-block;" action="post" name="varcosts">
            <table id = "variable_cost"  border="1" >
                <tr>
                    <th style="width:50px;">RESP</th>
                    <th style="width:50px;">MCSS</th>
                    <th style="width:50px;">COH</th>
                </tr>
                <tr>
                    <td style="width:50px;">3R00 (Mech. Services)</td>
                    <td style="width:50px;"><input type="text" name="" /> </td>
                    <td style="width:50px;"><input type="text" name="" /> </td> 
                </tr>

            </table>


</form>
    </div>

CSS就在这里：

table {
    border-collapse: collapse;
    border-spacing: 0;
}
table {
    font-size: inherit;
    white-space: nowrap;
    table-layout:fixed;
    padding:0px;
    margin:0px;
}
.loginTable{
    margin: 40px auto;
    background: #fff;
    width: 450px;
}
.loginTable tbody{
    border:2px solid #d5d5d5;

}
.loginTable tbody, tr, th, td{
    padding:10px;
}
.loginTable select, input, textarea {
    width:200px;    
}
.mmrTable{
    text-align:left;
    width: 590px;
}

    .variablecosts{
        width:400px;
    }
    #variable_cost{
        white-space: normal;
        table-layout: fixed;
        width:450px;
        float:left;
        border: 1px solid #ddd;
    }
    #variance_cost tbody,tr,th{
        width:75px;
    }
    #variable_cost input,text{
        width: 70px;
    }
    #variable_cost tbody,tr,td{
        width: 80px;
    }

Answer 1

您的表格宽度不得超过50％（包括任何边填充，边距和边框）

您的第二列和第三列不会缩小，因为您有输入，因此您需要使输入的大小更小，然后您可以将列的大小设置为大于输入的大小（表单元格在非破坏元素时使用宽度，如最小宽度）

一旦你解决了这两件事，就应该解决你的问题

表浮动和文本框问题

1 个答案: