html - Bootstrap 表单输入 css，如 MS-Excel

Question

我在我的元素中使用 Bootstrap 3.0。我希望我的表单域看起来像 MS-Excel 单元格。这个的 css 是什么？

这是表单的当前外观

和代码:

<div class="row">
<div class="col-md-2"><label>Transport Charges</label><input value="" class="form-control text-right" name="p_Frieght" id="p_Frieght"></div>
<div class="col-md-2"><label>Discount</label><input value="" class="form-control text-right" name="p_Discount" id="p_Discount"></div>
<div class="col-md-2"><label>RoundOff</label><input value="" class="form-control text-right" name="p_RoundOff" id="p_RoundOff"></div>
<div class="col-md-2"><label>Others</label><input value="" class="form-control text-right" name="p_Other" id="p_Other"></div>
<div class="col-md-3"><label>Total</label><input readonly value="" class="form-control text-right" name="p_Total" id="p_Total"></div>
</div>

我希望我的表格看起来像这样

谢谢。

Answer 1

使用表格

CSS

    input{border:0px solid #000; margin:0; background:transparent; width:100%}
table tr td{border-right:1px solid #000; border-bottom:1px solid #000;}
table{background: #fff none repeat scroll 0 0;
    border-left: 1px solid #000;
    border-top: 1px solid #000;}
    table tr:nth-child(even){background:#ccc;}
    table tr:nth-child(odd){background:#eee;}

HTML

<table cellpadding="0"; cellspacing="0">
        <tr>
            <td><input type="text" /></td>
            <td><input type="text" /></td>
            <td><input type="text" /></td>
            <td width="60"><input type="text" /></td>
        <td width="60"><input type="text" /></td>
        </tr>
        <tr>
            <td><input type="text" /></td>
            <td><input type="text" /></td>
            <td><input type="text" /></td>
            <td><input type="text" /></td>
            <td><input type="text" /></td>
        </tr>
        <tr>
            <td><input type="text" /></td>
            <td><input type="text" /></td>
            <td><input type="text" /></td>
            <td><input type="text" /></td>
            <td><input type="text" /></td>
        </tr>
        <tr>
            <td><input type="text" /></td>
            <td><input type="text" /></td>
            <td><input type="text" /></td>
            <td><input type="text" /></td>
            <td><input type="text" /></td>
        </tr>
    </table>

https://jsfiddle.net/r1frLkpo/2/