像MS-Excel一样的Bootstrap表单输入CSS [英] Bootstrap form input css like MS-Excel

问题描述

我在我的项目中使用Bootstrap 3.0。
我希望我的表单字段看起来像MS-Excel单元格。

I am using Bootstrap 3.0 in my project. I want my form fields look like MS-Excel cell. What is the css for this?

这是表单的当前外观

This is form's current look

和代码：

<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>

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

And I want my form to look like this

谢谢。

推荐答案

使用表格tr

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/

这篇关于像MS-Excel一样的Bootstrap表单输入CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！