Add width between table headers in Custom Table Form

Question

Using Example from SO Table Form

I successfully implemented the form in my component as per my need. The only thing bugging me is there is no gap between the headers and I can't seem to figure out on how to do that as it looks very odd.

As you can see in the highlighted it looks very weird with no gap between headers.

Working codebox

Please do let me know if anyone figures out on how to do that.

I tried:

formtable.css:

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

and it does provides space between header but it looks more ugly as header shifts to left and when clicking on add address inside form looks weird.

Answer 1

Well, you have not applied any styles. That says it all.

I have added some basic styling for your reference, you can style per your need.

Check the working example here

.App {
  font-family: sans-serif;
  text-align: center;
  padding: 1rem;
}

table {
  border-spacing: 0;
  border: 1px solid black;
}

tr:last-child td {
  border-bottom: 0;
}

th,
td {
  margin: 0;
  padding: 0.5rem;
  border-bottom: 1px solid black;
  border-right: 1px solid black;
}

th:last-child {
  border-right: 0;
}
td:last-child {
  border-right: 0;
}