I am new to tailwind framework with react and need assistance in this issue. I am trying to achieve the border-radius in tailwind of the table like in the image shown below
enter image description here
I am trying to achieve this by using the following code
<table className='w-full border border-seperate border-spacing-2 rounded-sm'>
<thead>
<tr>
<th className='border border-slate-600 rounded-md' >No</th>
<th className='border border-slate-600 rounded-md' >Title</th>
<th className='border border-slate-600 rounded-md max-md:hidden' >Author</th>
<th className='border border-slate-600 rounded-md max-md:hidden' >Publish Year</th>
<th className='border border-slate-600 rounded-md' >Operations</th>
</tr>
</thead>
<tbody>
{ books.map((book, index)=> (
<tr key={book._id} className='h-8'>
<td className='border border-solid border-slate-700 rounded-md text-center'>
{index + 1}
</td>
<td className='border border-slate-700 rounded-md text-center'>
{book.title};
</td>
<td className='border border-slate-700 rounded-md text-center max-md:hidden'>
{book.author}
</td>
<td className='border border-slate-700 rounded-md text-center max-md:hidden'>
{ book.publishYear }
</td>
<td className='flex justify-center border border-slate-700 rounded-md'>
<Link to={`/books/details/${book._id}`}>
<BsInfoCircle className='text-2xl text-green-800' />
</Link>
<Link to={`/books/edit/${book._id}`}>
<AiOutlineEdit className='text-2xl text-yellow-800' />
</Link>
<Link to={`/books/delete/${book._id}`}>
<MdOutlineAddBox className='text-2xl text-red-800' />
</Link>
</td>
</tr>
))
}
</tbody>
</table>
)}
</div>
What is the issue with the classes
And here is the image what iam getting
enter image description here
Sumesh Kumar is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.