1

I'm trying to do margin-bottom in my table to separate the table rows and it does not do anything. So, I tried with flex and it works but the table row does not inherit the width, and I must put specific width. Is there other way to separate the table rows?

This is the code with flex:

<table className="w-full text-sm text-left lg:table-fixed table-fixed">
      <thead className="text-sm text-white text-opacity-50 font-normal ">
       ...
      </thead>

      {() => (
        <tbody className={classNames({ ' text-white text-sm   flex flex-col': true })}>
          {dataT.map(vt => {
            return <VaultTransactionsRow key={vt.id} {...vt} />
          })}
        </tbody>
      )}
    </table>

This is the table that I created with flex

This is the table that I created with no affect of margin-bottom

David Cohen
  • 31
  • 4

1 Answers1

0

use border-collapse:seprate with border-spacing to add spacing.

table {
    border-collapse: separate;
    border-spacing: 0 1em;
}
rootShiv
  • 1,375
  • 2
  • 6
  • 21
  • HI, it does not work for me, it make a little space between the ```tr``` and the ```td```, but if I increase the spacing nothing happened . – David Cohen Jun 20 '22 at 07:09