Html 表浮动和文本框问题

我很难把两张桌子并排放好。我尝试了两种方法的

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>

---

表单的宽度不需要大于50%（包括任何侧边距、边距和边框）

第二列和第三列不会收缩，因为其中包含输入，因此需要将输入的大小减小，然后才能将列的大小设置为大于输入的大小（对于非中断元素，表格单元格使用的宽度类似于最小宽度）

---

一旦你解决了这两件事，它就会解决你的问题。请在你的问题中输入代码。嗯……你的小提琴链接不起作用。你能在你的问题中加入一些HTML/CSS吗？粗略地将相关的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;
    }