Question

我正在使用引导密码输入插件来执行此操作，这是演示页面 http://fkranenburg.github.io/bootstrap-pincode-input/

如何将代码段中的元素更改为此类

_ _ _ _ _ _

我想在每个td之间留一些空隙，增加边框间距似乎不起作用？

.pincode-input-container {
    display: inline-block;
}

.pincode-input-container.touch .touchwrapper.touch6 {
    width: 175px;
}

.pincode-input-text, .form-control.pincode-input-text {
    width: 35px;
    float: left;
}

.pincode-input-container.touch .touchwrapper {
    position: relative;
    height: 34px;
    margin-right: 5px;
    overflow: hidden;
    }
    
.pincode-input-container.touch .touchwrapper .pincode-input-text {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  width: 100%;
  display: block;
  background-color: transparent;
  background: transparent;
  letter-spacing: 20px;
}

.pincode-input-container.touch .touchwrapper .touchtable {
    width: 100%;
    height: 100%;
    table-layout: fixed;
}

.pincode-input-container.touch .touchwrapper .touchtable td {
    border-right: 1px solid #ccc;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://raw.githubusercontent.com/fkranenburg/bootstrap-pincode-input/master/css/bootstrap-pincode-input.css" rel="stylesheet"/>
<script src="https://raw.githubusercontent.com/fkranenburg/bootstrap-pincode-input/master/js/bootstrap-pincode-input.js"></script>

<div class="pincode-input-container touch">
  <div class="touchwrapper touch6"><input type="number" inputmode="numeric" placeholder="" maxlength="6" autocomplete="off" class="form-control pincode-input-text">
    <table class="touchtable">
      <tbody>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td class="last"></td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="text-danger pincode-input-error"></div>
</div>

Answer 1

似乎可以达到目的：

table {
    border-spacing: 10px;
    border-collapse: separate;
}

这就是您要寻找的东西？

如何在表格单元格之间增加空间？

1 个答案: