How to separate table rows with space between them without border-spacing?

user_19327589 0
Viewed 43

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

tailwind-css reactjs sass css javascript
1 Answers

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

table {
    border-collapse: separate;
    border-spacing: 0 1em;
}
user_143674160
Related