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, Mar 05 '19 at 16:01
we have a similar question already answered on https://stackoverflow.com/questions/12585461/controlling-spacing-between-table-cells / a sample could be found at: http://jsfiddle.net/7JufT/8/ — Marcel Kohls, Mar 05 '19 at 16:04

score 3 · Accepted Answer · answered Mar 05 '19 at 16:12

3

Seems this do the trick:

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

This is what you're looking for?

answered Mar 05 '19 at 16:12

Carnaru Valentin

1,690
17
27

How to add space between table cells?

1 Answers1