Bootstrap Form Input Css Like 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 And code :
<
Solution 1:
use table 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>
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>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>Bootstrap</title>
<style type="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>
<div class="table-responsive">
<table class="table table-bordered table-condensed" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td><input type="text" class="form-control" /></td>
<td><input type="text" class="form-control" /></td>
<td><input type="text" class="form-control" /></td>
<td><input type="text" class="form-control" /></td>
<td><input type="text" class="form-control" /></td>
<td><input type="text" class="form-control" /></td>
</tr>
<tr>
<td><input type="text" class="form-control" /></td>
<td><input type="text" class="form-control" /></td>
<td><input type="text" class="form-control" /></td>
<td><input type="text" class="form-control" /></td>
<td><input type="text" class="form-control" /></td>
<td><input type="text" class="form-control" /></td>
</tr>
<tr>
<td><input type="text" class="form-control" /></td>
<td><input type="text" class="form-control" /></td>
<td><input type="text" class="form-control" /></td>
<td><input type="text" class="form-control" /></td>
<td><input type="text" class="form-control" /></td>
<td><input type="text" class="form-control" /></td>
</tr>
<tr>
<td><input type="text" class="form-control" /></td>
<td><input type="text" class="form-control" /></td>
<td><input type="text" class="form-control" /></td>
<td><input type="text" class="form-control" /></td>
<td><input type="text" class="form-control" /></td>
<td><input type="text" class="form-control" /></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Post a Comment for "Bootstrap Form Input Css Like MS-Excel"