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

vbnewbie

我正在使用引导密码输入插件来执行此操作,这是演示页面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>

卡纳鲁·瓦伦丁(Carnaru Valentin)

看来这可以解决问题:

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

这就是您要找的东西吗?

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在 2 个表格视图单元格之间创建空间?

如何在持有表格时逐步增加表格单元格的大小

如何在表格视图的坐标空间中获得表格视图单元格的框架?

div之间的空间-显示表格单元格

表格单元格之间没有边界的空间

Google表格:如何在特定单元格编号参考中填充和防止增加

如何删除表格单元格中的空白空间?

如何在HTML中的表格单元格之间放置间距?

如何在Material-ui中删除表格中单元格之间的线

如何在Edge浏览器中删除表格单元格之间的白色间距

如何在R中的表格中的单元格之间找到%匹配/相似性?

如何更改UICollectionView中单元格之间的空间?

动态填充表格单元格时如何在表格单元格的底部定位 div

如何在Excel中增加单元格引用

如何在不增加/减少 td 原始大小的情况下移动表格单元格中的文本?

单元格之间的空间 UICollectionViewLayout

删除UICollectionView的单元格之间的空间

Collectionview单元格之间的最大空间

删除表格单元格之间的空白

如何在iOS中更改内部表格视图单元格的单元格高度?

如何在Google表格中将矩形的单元格转换为单元格的行/列?

如何在TableView中复制/粘贴表格单元格

如何在表格末尾添加额外的单元格?

如何在Google表格单元格中放置href

如何在表格单元格中定位元素?

如何在表格单元格的中心右对齐数字?

如何在表格单元格中获取元素?

如何在表格单元格中插入弹出窗口?

如何在表格单元格的顶部显示内容?