Trying to create a React component with multiple input field tables, the challenge is aligning the right side of the table correctly. The issue lies in inconsistent alignment of content within the cells leading to disruption in overall layout.
Experimented with column width adjustments but didn't fully resolve the problem. Any recommended approach or CSS technique that ensures consistent alignment on the right side of the table?
Here's a snippet of the code:
// Relevant code here
This is the CSS code for GenerateCalendar:
.options-table {
border-collapse: collapse;
}
.options-table td {
border: 1px solid black;
padding: 18px;
cursor: pointer;
}
.options-table td.selected {
background-color: lightblue;
}
.name-table {
border-collapse: collapse;
}
.name-table td {
border: 1px solid black;
padding: 18px;
cursor: pointer;
}
.name-table-wrapper {
/* overflow: hidden; Ensures the rounded corners are visible */
border-radius: 100px; /* Adjust the radius as needed */
}
Current look:
https://i.stack.imgur.com/n9m0c.png
Desired output:
https://i.stack.imgur.com/czV8P.png
Tried adjusting cell widths and styling, seeking suggestions for a better way to achieve the desired alignment. Open to insights and guidance. Thank you!