引导表单输入 css，如 MS-Excel答案

【问题标题】：Bootstrap form input css like MS-Excel引导表单输入 css，如 MS-Excel
【发布时间】：2016-01-12 17:56:19
【问题描述】：

我在我的项目中使用 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>

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

谢谢。

【问题讨论】：

您必须提供代码
抱歉我的问题不完整。添加了我的代码。

标签： html css twitter-bootstrap-3

【解决方案1】：

使用表 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/

【讨论】：

谢谢。这对我有用。没有桌子可以吗？
谢谢。这个解决方案更适合我。

【解决方案2】：

如果您使用的是 BOOTSTRAP 3.0，那么请尝试使用 “响应式表格”，这将对您有很大帮助，并且会减少您花费的时间。

我在这里为您提供一个响应式表格，如您所说，看起来像 Excel。

希望对你有所帮助。

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

【讨论】：