How to add space between table cells?

Question

I'm using bootstrap pincode input plugin to do this, here is the demo page http://fkranenburg.github.io/bootstrap-pincode-input/

How can I change the element in snippet to something like this

_ _ _ _ _ _

I want some gap between each td, adding border spacing seems like not working?

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

Suggest rewording the title of your question to: "How to add space between table cells" — Sean
– Sean, Commented Mar 5, 2019 at 16:01
we have a similar question already answered on stackoverflow.com/questions/12585461/… / a sample could be found at: jsfiddle.net/7JufT/8 — Marcel Kohls
– Marcel Kohls, Commented Mar 5, 2019 at 16:04

Carnaru Valentin · Accepted Answer · 2019-03-05 16:12:52Z

3

Seems this do the trick:

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

This is what you're looking for?

answered Mar 5, 2019 at 16:12

Carnaru Valentin

1,92524 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to add space between table cells?

1 Answer 1

Comments

Hot Network Questions