Firstname	Email	Status
Mary	[email protected]	Active
Moe	[email protected]	Active
Dooley	[email protected]	Inactive

Copy

<div class="overflow-auto">
	<table class="table-auto mb-0 w-full">
		<thead class="border border-border-color">
			<tr>
				<th class="px-4 py-2 bg-light text-dark text-start">Firstname</th> 
				<th class="px-4 py-2 bg-light text-dark text-start">Email</th> 
				<th class="px-4 py-2 bg-light text-dark text-start">Status</th> 
			</tr>
		</thead>
		<tbody class="border border-border-color">
			<tr class="border-b border-border-color">
				<td class="inline-flex items-center gap-2 px-4 py-3 text-start">
					<span class="relative flex shrink-0">
						<img class="w-8 h-8 border border-border-color rounded-full" src="assets/img/avatar/avatar-18.jpg" alt="avatar">
						<span class="bottom-0 end-0.5 absolute  size-2 bg-success border border-white rounded-full"></span>
					</span>
					<span class="text-dark">Mary</span>
				</td> 
				<td class="px-4 py-3 text-start">[email protected]</td>
				<td class="px-4 py-3 text-start">
					<span class="badge rounded-lg text-xs font-medium bg-success-50 text-success border border-success">Active</span>
				</td>
			</tr> 
			<tr class="border-b border-border-color">
				<td class="inline-flex items-center gap-2 px-4 py-3 text-start">
					<span class="relative flex shrink-0">
						<img class="w-8 h-8 border border-border-color rounded-full" src="assets/img/avatar/avatar-10.jpg" alt="avatar">
						<span class="bottom-0 end-0.5 absolute  size-2 bg-success border border-white rounded-full"></span>
					</span>
					<span class="text-dark">Moe</span>
				</td> 
				<td class="px-4 py-3 text-start">[email protected]</td>
				<td class="px-4 py-3 text-start">
					<span class="badge rounded-lg text-xs font-medium bg-success-50 text-success border border-success">Active</span>
				</td>
			</tr> 
			<tr class="border-b border-border-color">
				<td class="inline-flex items-center gap-2 px-4 py-3 text-start">
					<span class="relative flex shrink-0">
						<img class="w-8 h-8 border border-border-color rounded-full" src="assets/img/avatar/avatar-03.jpg" alt="avatar">
						<span class="bottom-0 end-0.5 absolute  size-2 bg-success border border-white rounded-full"></span>
					</span>
					<span class="text-dark">Dooley</span>
				</td> 
				<td class="px-4 py-3 text-start">[email protected]</td>
				<td class="px-4 py-3 text-start">
					<span class="badge rounded-lg text-xs font-medium bg-danger-50 text-danger border border-danger">Inactive</span>
				</td>
			</tr> 
		</tbody>
	</table>
</div>

Firstname	Email	Action
Mary	[email protected]	View Details Edit Delete
Moe	[email protected]	View Details Edit Delete
Dooley	[email protected]	View Details Edit Delete

Copy

<div class="overflow-auto">
	<table class="table-auto mb-0 w-full">
		<thead class="border border-border-color">
			<tr class="bg-dark text-white">
				<th class="px-4 py-2 text-start">Firstname</th> 
				<th class="px-4 py-2 text-start">Email</th> 
				<th class="px-4 py-2 text-start">Action</th> 
			</tr>
		</thead>
		<tbody class="border border-border-color">
			<tr class="border-b border-border-color bg-dark text-white">
				<td class="inline-flex  w-full items-center gap-2 px-4 py-3 text-start">
					<span class="relative flex shrink-0">
						<img class="w-8 h-8 border border-border-color rounded-full" src="assets/img/avatar/avatar-18.jpg" alt="avatar">
						<span class="bottom-0 end-0.5 absolute  size-2 bg-success border border-white rounded-full"></span>
					</span>
					<span class="text-white">Mary</span>
				</td> 
				<td class="px-4 py-3 text-start">[email protected]</td>
				<td class="px-4 py-3 text-start">
					<div class="hs-dropdown [--placement:bottom-right] [--auto-close:inside] relative inline-flex">
						<button type="button" class="hs-dropdown-toggle cursor-pointer size-8 rounded-full inline-flex items-center justify-center text-sm font-normal border border-border-color bg-white text-gray-800 hover:bg-white focus:outline-hidden focus:white" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
							<i class="icon-ellipsis-vertical"></i>
						</button>

						<div class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden min-w-50 bg-white border border-border-color rounded-lg mt-2 z-1" role="menu" aria-orientation="vertical">
							<div class="p-2 space-y-1">
								<a class="flex items-center px-4 py-1.75 rounded-lg text-default hover:bg-light hover:text-primary focus:outline-hidden focus:bg-white hover:bg-primary-50" href="#">
									<i class="icon-eye text-gray-900 me-2"></i>View Details
								</a>
								<a class="flex items-center px-4 py-1.75 rounded-lg text-sm text-default hover:bg-light hover:text-primary focus:outline-hidden focus:bg-white hover:bg-primary-50" href="#">
									<i class="icon-pencil-line me-2"></i>Edit
								</a>
								<a class="flex items-center px-4 py-1.75 rounded-lg text-sm text-default hover:bg-light hover:text-primary focus:outline-hidden focus:bg-white hover:bg-primary-50" href="#">
									<i class="icon-trash-2 text-gray-900 me-2"></i>Delete
								</a>
							</div>
						</div>
					</div>
				</td>
			</tr> 
			<tr class="border-b border-border-color bg-dark text-white">
				<td class="inline-flex items-center w-full gap-2 px-4 py-3 text-start">
					<span class="relative flex shrink-0">
						<img class="w-8 h-8 border border-border-color rounded-full" src="assets/img/avatar/avatar-10.jpg" alt="avatar">
						<span class="bottom-0 end-0.5 absolute  size-2 bg-success border border-white rounded-full"></span>
					</span>
					<span class="text-white">Moe</span>
				</td> 
				<td class="px-4 py-3 text-white">[email protected]</td>
				<td class="px-4 py-3 text-white">
					<div class="hs-dropdown [--placement:bottom-right] [--auto-close:inside] relative inline-flex">
						<button type="button" class="hs-dropdown-toggle cursor-pointer size-8 rounded-full inline-flex items-center justify-center text-sm font-normal border border-border-color bg-white text-gray-800 hover:bg-white focus:outline-hidden focus:white" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
							<i class="icon-ellipsis-vertical"></i>
						</button>

						<div class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden min-w-50 bg-white border border-border-color rounded-lg mt-2 z-1" role="menu" aria-orientation="vertical">
							<div class="p-2 space-y-1">
								<a class="flex items-center px-4 py-1.75 rounded-lg text-default hover:bg-light hover:text-primary focus:outline-hidden focus:bg-white hover:bg-primary-50" href="#">
									<i class="icon-eye text-gray-900 me-2"></i>View Details
								</a>
								<a class="flex items-center px-4 py-1.75 rounded-lg text-sm text-default hover:bg-light hover:text-primary focus:outline-hidden focus:bg-white hover:bg-primary-50" href="#">
									<i class="icon-pencil-line me-2"></i>Edit
								</a>
								<a class="flex items-center px-4 py-1.75 rounded-lg text-sm text-default hover:bg-light hover:text-primary focus:outline-hidden focus:bg-white hover:bg-primary-50" href="#">
									<i class="icon-trash-2 text-gray-900 me-2"></i>Delete
								</a>
							</div>
						</div>
					</div>
				</td>
			</tr> 
			<tr class="border-b border-border-color bg-dark text-white">
				<td class="inline-flex items-center w-full gap-2 px-4 py-3 text-start">
					<span class="relative flex shrink-0">
						<img class="w-8 h-8 border border-border-color rounded-full" src="assets/img/avatar/avatar-03.jpg" alt="avatar">
						<span class="bottom-0 end-0.5 absolute  size-2 bg-success border border-white rounded-full"></span>
					</span>
					<span class="text-white">Dooley</span>
				</td> 
				<td class="px-4 py-3 text-white">[email protected]</td>
				<td class="px-4 py-3 text-white">
					<div class="hs-dropdown [--placement:bottom-right] [--auto-close:inside] relative inline-flex">
						<button type="button" class="hs-dropdown-toggle cursor-pointer size-8 rounded-full inline-flex items-center justify-center text-sm font-normal border border-border-color bg-white text-gray-800 hover:bg-white focus:outline-hidden focus:white" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
							<i class="icon-ellipsis-vertical"></i>
						</button> 
						<div class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden min-w-50 bg-white border border-border-color rounded-lg mt-2 z-1" role="menu" aria-orientation="vertical">
							<div class="p-2 space-y-1">
								<a class="flex items-center px-4 py-1.75 rounded-lg text-default hover:bg-light hover:text-primary focus:outline-hidden focus:bg-white hover:bg-primary-50" href="#">
									<i class="icon-eye text-gray-900 me-2"></i>View Details
								</a>
								<a class="flex items-center px-4 py-1.75 rounded-lg text-sm text-default hover:bg-light hover:text-primary focus:outline-hidden focus:bg-white hover:bg-primary-50" href="#">
									<i class="icon-pencil-line me-2"></i>Edit
								</a>
								<a class="flex items-center px-4 py-1.75 rounded-lg text-sm text-default hover:bg-light hover:text-primary focus:outline-hidden focus:bg-white hover:bg-primary-50" href="#">
									<i class="icon-trash-2 text-gray-900 me-2"></i>Delete
								</a>
							</div>
						</div>
					</div>
				</td>
			</tr> 
		</tbody>
	</table>
</div>

Copy

<div class="overflow-auto">
	<table class="table-auto mb-0 w-full">
		<thead class="border border-border-color">
			<tr>
				<th class="px-4 py-2 bg-light text-dark text-start">Firstname</th> 
				<th class="px-4 py-2 bg-light text-dark text-start">Email</th> 
				<th class="px-4 py-2 bg-light text-dark text-start">Action</th> 
			</tr>
		</thead>
		<tbody class="border border-border-color">
			<tr class="border border-border-color">
				<td class="border border-border-color px-4 py-3 text-start">John</td> 
				<td class="border border-border-color px-4 py-3 text-start">[email protected]</td>
				<td class="border border-border-color px-4 py-3 text-start">
					<button type="button" class="btn-small bg-light border border-border-color text-dark text-center hover:bg-light-800 hover:text-dark">View</button>
				</td>
			</tr> 
			<tr class="border border-border-color">
				<td class="border border-border-color px-4 py-3 text-start">Mary</td> 
				<td class="border border-border-color px-4 py-3 text-start">[email protected]</td>
				<td class="border border-border-color px-4 py-3 text-start">
					<button type="button" class="btn-small bg-light border border-border-color text-dark text-center hover:bg-light-800 hover:text-dark">View</button>
				</td>
			</tr> 
			<tr class="border border-border-color">
				<td class="border border-border-color px-4 py-3 text-start">July</td> 
				<td class="border border-border-color px-4 py-3 text-start">[email protected]</td>
				<td class="border border-border-color px-4 py-3 text-start">
					<button type="button" class="btn-small bg-light border border-border-color text-dark text-center hover:bg-light-800 hover:text-dark">View</button>
				</td>
			</tr> 
		</tbody>
	</table>
</div>

Copy

<div class="overflow-auto">
	<table class="table-auto mb-0 w-full">
		<thead>
			<tr>
				<th class="px-4 py-2 bg-light text-dark text-start">Firstname</th>
				<th class="px-4 py-2 bg-light text-dark text-start">Lastname</th>
				<th class="px-4 py-2 bg-light text-dark text-start">Action</th> 
			</tr>
		</thead>
		<tbody>
			<tr class="bg-light">
				<td class="px-4 py-3 text-start">John</td> 
				<td class="px-4 py-3 text-start">[email protected]</td>
				<td class="px-4 py-3 text-start">
					<button type="button" class="btn-small flex items-center justify-center gap-1.5 cursor-pointer bg-success border border-success text-white text-center hover:bg-success-800 hover:text-white"><i class="icon icon-download"></i>Success</button>
				</td>
			</tr> 
			<tr>    
				<td class="px-4 py-3 text-start">Mary</td> 
				<td class="px-4 py-3 text-start">[email protected]</td>
				<td class="px-4 py-3 text-start">
					<button type="button" class="btn-small flex items-center justify-center gap-1.5 cursor-pointer bg-success border border-success text-white text-center hover:bg-success-800 hover:text-white"><i class="icon icon-download"></i>Success</button>
				</td>
			</tr> 
			<tr  class="bg-light">
				<td class="px-4 py-3 text-start">July</td> 
				<td class="px-4 py-3 text-start">[email protected]</td>
				<td class="px-4 py-3 text-start">
					<button type="button" class="btn-small flex items-center justify-center gap-1.5 cursor-pointer bg-success border border-success text-white text-center hover:bg-success-800 hover:text-white"><i class="icon icon-download"></i>Success</button>
				</td>
			</tr> 
		</tbody>
	</table>
</div>

Firstname	Email	Action
Mary	[email protected]
Moe	[email protected]
Dooley	[email protected]

Copy

<div class="overflow-auto">
	<table class="table-auto mb-0 w-full">
		<thead class="border border-border-color">
			<tr>
				<th class="px-4 py-2 bg-light text-dark text-start">Firstname</th> 
				<th class="px-4 py-2 bg-light text-dark text-start">Email</th> 
				<th class="px-4 py-2 bg-light text-dark text-start">Action</th> 
			</tr>
		</thead>
		<tbody class="border border-border-color">
			<tr class="border-b border-border-color">
				<td class="inline-flex items-center gap-2 px-4 py-3 text-start">
					<span class="relative flex shrink-0">
						<img class="w-8 h-8 border border-border-color rounded-full" src="assets/img/avatar/avatar-18.jpg" alt="avatar">
						<span class="bottom-0 end-0.5 absolute  size-2 bg-success border border-white rounded-full"></span>
					</span>
					<span class="text-dark">Mary</span>
				</td> 
				<td class="px-4 py-3 text-start">[email protected]</td>
				<td class="px-4 py-3 text-start flex gap-2">
					<button type="button" class="btn-small flex items-center justify-center bg-primary-100 border border-primary text-primary text-center hover:bg-primary-200 rounded-full"><i class="icon icon-square-pen"></i></button>
					<button type="button" class="btn-small flex items-center justify-center bg-success-100 border border-success text-success text-center hover:bg-success-200 rounded-full"><i class="icon icon-download"></i></button>
					<button type="button" class="btn-small flex items-center justify-center bg-danger-100 border border-danger text-danger text-center hover:bg-danger-200 rounded-full"><i class="icon icon-trash-2"></i></button>
				</td>
			</tr> 
			<tr class="border-b border-border-color">
				<td class="inline-flex items-center gap-2 px-4 py-3 text-start">
					<span class="relative flex shrink-0">
						<img class="w-8 h-8 border border-border-color rounded-full" src="assets/img/avatar/avatar-10.jpg" alt="avatar">
						<span class="bottom-0 end-0.5 absolute  size-2 bg-success border border-white rounded-full"></span>
					</span>
					<span class="text-dark">Moe</span>
				</td> 
				<td class="px-4 py-3 text-start">[email protected]</td>
				<td class="px-4 py-3 text-start flex gap-2">
					<button type="button" class="btn-small flex items-center justify-center bg-primary-100 border border-primary text-primary text-center hover:bg-primary-200 rounded-full"><i class="icon icon-square-pen"></i></button>
					<button type="button" class="btn-small flex items-center justify-center bg-success-100 border border-success text-success text-center hover:bg-success-200 rounded-full"><i class="icon icon-download"></i></button>
					<button type="button" class="btn-small flex items-center justify-center bg-danger-100 border border-danger text-danger text-center hover:bg-danger-200 rounded-full"><i class="icon icon-trash-2"></i></button>
				</td>
			</tr> 
			<tr class="border-b border-border-color">
				<td class="inline-flex items-center gap-2 px-4 py-3 text-start">
					<span class="relative flex shrink-0">
						<img class="w-8 h-8 border border-border-color rounded-full" src="assets/img/avatar/avatar-03.jpg" alt="avatar">
						<span class="bottom-0 end-0.5 absolute  size-2 bg-success border border-white rounded-full"></span>
					</span>
					<span class="text-dark">Dooley</span>
				</td> 
				<td class="px-4 py-3 text-start">[email protected]</td>
				<td class="px-4 py-3 text-start flex gap-2">
					<button type="button" class="btn-small flex items-center justify-center bg-primary-100 border border-primary text-primary text-center hover:bg-primary-200 rounded-full"><i class="icon icon-square-pen"></i></button>
					<button type="button" class="btn-small flex items-center justify-center bg-success-100 border border-success text-success text-center hover:bg-success-200 rounded-full"><i class="icon icon-download"></i></button>
					<button type="button" class="btn-small flex items-center justify-center bg-danger-100 border border-danger text-danger text-center hover:bg-danger-200 rounded-full"><i class="icon icon-trash-2"></i></button>
				</td>
			</tr> 
		</tbody>
	</table>
</div>

Firstname	Email	Action
Mary	[email protected]	Delete
Moe	[email protected]	Delete
Dooley	[email protected]	Delete

Copy

<div class="overflow-auto">
	<table class="table-auto mb-0 w-full">
		<thead class="border border-border-color">
			<tr>
				<th class="px-4 py-2 bg-light text-dark text-start">Firstname</th> 
				<th class="px-4 py-2 bg-light text-dark text-start">Email</th> 
				<th class="px-4 py-2 bg-light text-dark text-start">Action</th> 
			</tr>
		</thead>
		<tbody class="border border-border-color">
			<tr class="border-b border-border-color">
				<td class="inline-flex items-center gap-2 px-4 py-3 text-start">
					<span class="relative flex shrink-0">
						<img class="w-8 h-8 border border-border-color rounded-full" src="assets/img/avatar/avatar-18.jpg" alt="avatar">
						<span class="bottom-0 end-0.5 absolute  size-2 bg-success border border-white rounded-full"></span>
					</span>
					<span class="text-dark">Mary</span>
				</td> 
				<td class="px-4 py-3 text-start">[email protected]</td>
				<td class="px-4 py-3 text-start">
					<button type="button" class="btn-small flex items-center justify-center gap-1.5 cursor-pointer bg-danger border border-danger text-white text-center hover:bg-danger-800 hover:text-white"><i class="icon icon-trash-2"></i>Delete</button>
				</td>
			</tr> 
			<tr class="border-b border-border-color">
				<td class="inline-flex items-center gap-2 px-4 py-3 text-start">
					<span class="relative flex shrink-0">
						<img class="w-8 h-8 border border-border-color rounded-full" src="assets/img/avatar/avatar-10.jpg" alt="avatar">
						<span class="bottom-0 end-0.5 absolute  size-2 bg-success border border-white rounded-full"></span>
					</span>
					<span class="text-dark">Moe</span>
				</td> 
				<td class="px-4 py-3 text-start">[email protected]</td>
				<td class="px-4 py-3 text-start">
					<button type="button" class="btn-small flex items-center justify-center gap-1.5 cursor-pointer bg-danger border border-danger text-white text-center hover:bg-danger-800 hover:text-white"><i class="icon icon-trash-2"></i>Delete</button>
				</td>
			</tr> 
			<tr class="border-b border-border-color">
				<td class="inline-flex items-center gap-2 px-4 py-3 text-start">
					<span class="relative flex shrink-0">
						<img class="w-8 h-8 border border-border-color rounded-full" src="assets/img/avatar/avatar-03.jpg" alt="avatar">
						<span class="bottom-0 end-0.5 absolute  size-2 bg-success border border-white rounded-full"></span>
					</span>
					<span class="text-dark">Dooley</span>
				</td> 
				<td class="px-4 py-3 text-start">[email protected]</td>
				<td class="px-4 py-3 text-start">
					<button type="button" class="btn-small flex items-center justify-center gap-1.5 cursor-pointer bg-danger border border-danger text-white text-center hover:bg-danger-800 hover:text-white"><i class="icon icon-trash-2"></i>Delete</button>
				</td>
			</tr> 
		</tbody>
	</table>
</div>