Menu
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 :
<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
Thank you.
759
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>
https://jsfiddle.net/r1frLkpo/2/
67
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
