Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Twitter Bootstrap 3

Bootstrap Form Input Css Like Ms-excel

Post a Comment
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 And code :
<

Solution 1:

use table tr

CSS

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

HTML

<tablecellpadding="0"; cellspacing="0"><tr><td><inputtype="text" /></td><td><inputtype="text" /></td><td><inputtype="text" /></td><tdwidth="60"><inputtype="text" /></td><tdwidth="60"><inputtype="text" /></td></tr><tr><td><inputtype="text" /></td><td><inputtype="text" /></td><td><inputtype="text" /></td><td><inputtype="text" /></td><td><inputtype="text" /></td></tr><tr><td><inputtype="text" /></td><td><inputtype="text" /></td><td><inputtype="text" /></td><td><inputtype="text" /></td><td><inputtype="text" /></td></tr><tr><td><inputtype="text" /></td><td><inputtype="text" /></td><td><inputtype="text" /></td><td><inputtype="text" /></td><td><inputtype="text" /></td></tr></table>

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

Solution 2:

if you are using BOOTSTRAP 3.0 then try to use " Responsive tables ", this will help you a lot and will be less time consuming for you.

Here by i am providing you a responsive table with look like Excel as you said.

Hope this helps you.

<!DOCTYPE html><html><head><scriptsrc="http://code.jquery.com/jquery.min.js"></script><linkhref="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"rel="stylesheet"type="text/css" /><scriptsrc="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script><metacharset="utf-8"><title>Bootstrap</title><styletype="text/css">input {display: block !important; padding: 0!important; margin: 0!important; width: 100%!important; border-radius: 0!important; line-height: 1!important;}
		td {margin: 0!important; padding: 0!important;}
    </style></head><body><divclass="table-responsive"><tableclass="table table-bordered table-condensed"cellpadding="0"cellspacing="0"><tbody><tr><td><inputtype="text"class="form-control" /></td><td><inputtype="text"class="form-control" /></td><td><inputtype="text"class="form-control" /></td><td><inputtype="text"class="form-control" /></td><td><inputtype="text"class="form-control" /></td><td><inputtype="text"class="form-control" /></td></tr><tr><td><inputtype="text"class="form-control" /></td><td><inputtype="text"class="form-control" /></td><td><inputtype="text"class="form-control" /></td><td><inputtype="text"class="form-control" /></td><td><inputtype="text"class="form-control" /></td><td><inputtype="text"class="form-control" /></td></tr><tr><td><inputtype="text"class="form-control" /></td><td><inputtype="text"class="form-control" /></td><td><inputtype="text"class="form-control" /></td><td><inputtype="text"class="form-control" /></td><td><inputtype="text"class="form-control" /></td><td><inputtype="text"class="form-control" /></td></tr><tr><td><inputtype="text"class="form-control" /></td><td><inputtype="text"class="form-control" /></td><td><inputtype="text"class="form-control" /></td><td><inputtype="text"class="form-control" /></td><td><inputtype="text"class="form-control" /></td><td><inputtype="text"class="form-control" /></td></tr></tbody></table></div></body></html>

Post a Comment for "Bootstrap Form Input Css Like Ms-excel"