【问题标题】:Make input fields look like table cells in bootstrap 3使输入字段看起来像引导程序 3 中的表格单元格
【发布时间】:2014-10-26 22:03:52
【问题描述】:

我在 bootstrap 3 中有一张桌子

<table class="table table-bordered table-condensed">
    <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>
    </tbody>
</table>

我可以让输入字段看起来像普通单元格吗?我希望输入字段填写整个单元格(没有输入边距或表格单元格填充)。就像 Excel 电子表格一样,我有许多单元格,并且可以在每个单元格中写入。

【问题讨论】:

    标签: html css twitter-bootstrap twitter-bootstrap-3 html-table


    【解决方案1】:

    是的。这样做:

    input {display: block; padding: 0; margin: 0; border: 0; width: 100%;}
    td {margin: 0; padding: 0;}
    

    小提琴:http://jsbin.com/biqomurafage/1

    【讨论】:

      【解决方案2】:

      您也可以尝试像这样使用 contentEditable 表格:DEMO

      <table>
          <tbody>
              <tr>
                  <th></th>
                  <th>A</th>
                  <th>B</th>
                  <th>C</th>
              </tr>
              <tr>
                  <th>1</th>
                  <td><span id="A1" contenteditable>#####</span></td>
                  <td><span id="B1" contenteditable></span></td>
                  <td><span id="C1" contenteditable></span></td>
              </tr>
              <tr>
                  <th>2</th>
                  <td><span id="A2" contenteditable></span></td>
                  <td><span id="B2" contenteditable></span></td>
                  <td><span id="C2" contenteditable></span></td>
              </tr>
          </tbody>
      </table>
      
      span {
          width: 100%;
          display: block;
      }
      

      *注意,IE 需要内容可编辑范围才能正确处理 contentEditable 属性。 Reference

      【讨论】:

      • 很棒的答案!我可以补充一下,您可能希望将min-height: 100% 用于跨度以便能够在空时单击
      • 如果您打算以表格形式提交表格,这是否可行?
      • @paul B - 确保您可以使用 html 表格单元格作为表单的输入字段。只需为您要提交的每个单元格设置idname,并根据您的表单需要对其进行处理。这也是我的需要。
      猜你喜欢
      • 2014-03-12
      • 1970-01-01
      • 1970-01-01
      • 2014-10-19
      • 1970-01-01
      • 2020-11-01
      • 2018-05-24
      • 1970-01-01
      • 2014-08-07
      相关资源
      最近更新 更多