Issue
I'm working on a React component that involves several tables for input fields. I'm facing an issue with aligning the right side of the table. Currently, the content within the table cells on the right side is not consistently aligned, and it's affecting the overall layout.
I've tried adjusting the width of the columns, but it doesn't seem to solve the problem entirely. Is there a recommended approach or CSS styling technique to ensure that the right side of the table is consistently aligned?
Here's a snippet of my code for reference:
import React, { useState } from 'react';
import '../styles/GenerateCalendar.css';
function GenerateCalendar() {
// State variables to store input values
const [eventName, setEventName] = useState('');
const [eventLocation, setEventLocation] = useState('');
const [eventFromDate, setEventFromDate] = useState('');
const [eventFinishDate, setEventFinishDate] = useState('');
const [eventTime, setEventTime] = useState('');
const [selectedOptionRow2, setSelectedOptionRow2] = useState('');
const [selectedOptionRow3, setSelectedOptionRow3] = useState('');
// Function to handle the change in the radio button selection for the second row
const handleOptionChangeRow2 = (option: string) => {
setSelectedOptionRow2(option);
};
// Function to handle the change in the radio button selection for the third row
const handleOptionChangeRow3 = (option: string) => {
setSelectedOptionRow3(option);
};
return (
<div className="Calendar">
<header>
<h1 style={{ textAlign: 'center' }}>Enter Your Calendar</h1>
</header>
<form>
<div className="name-table-wrapper" style={{ borderRadius: '100%' }}>
<table className="name-table" style={{ borderRadius: 'inherit' }}>
<tbody>
<tr style={{ borderRadius: '100%' }}>
<td
style={{ width: '150px' }}
>Name:</td>
<td
style={{width: '666.5px'}}
>
<input
type="text"
value={eventName}
onChange={(e) => setEventName(e.target.value)}
style={{borderColor: 'transparent', width: '100%'}}
/>
</td>
</tr>
</tbody>
</table>
</div>
<table className="options-table">
<tbody>
<tr>
<td
style={{ width: '150px' }}
>Event:</td>
<td
style={{ width: '120px' }}
onClick={() => handleOptionChangeRow2('Option 1')} className={selectedOptionRow2 === 'Option 1' ? 'selected' : ''}>
Lecture
</td>
<td
style={{ width: '120px' }}
onClick={() => handleOptionChangeRow2('Option 2')} className={selectedOptionRow2 === 'Option 2' ? 'selected' : ''}>
Laboratory
</td>
<td
style={{ width: '120px' }}
onClick={() => handleOptionChangeRow2('Option 3')} className={selectedOptionRow2 === 'Option 3' ? 'selected' : ''}>
Extracurricular
</td>
<td
style={{ width: '120px' }}
onClick={() => handleOptionChangeRow2('Option 4')} className={selectedOptionRow2 === 'Option 4' ? 'selected' : ''}>
Commute time
</td>
<td
style={{ width: '120px' }}
onClick={() => handleOptionChangeRow2('Option 5')} className={selectedOptionRow2 === 'Option 5' ? 'selected' : ''}>
Study
</td>
</tr>
</tbody>
</table>
<table className="options-table">
<tbody>
<tr>
<td
style={{ width: '150px' }}
>Event time:</td>
<td onClick={() => handleOptionChangeRow3('Option 1')} className={selectedOptionRow3 === 'Option 1' ? 'selected' : ''}>
Strict
</td>
<td onClick={() => handleOptionChangeRow3('Option 2')} className={selectedOptionRow3 === 'Option 2' ? 'selected' : ''}>
Flexible but preferred
</td>
<td onClick={() => handleOptionChangeRow3('Option 3')} className={selectedOptionRow3 === 'Option 3' ? 'selected' : ''}>
Flexible
</td>
</tr>
</tbody>
</table>
<table className="options-table">
<tbody>
<tr>
<td
style={{ width: '150px' }}
>Location:</td>
<td>
<input
type="text"
value={eventLocation}
onChange={(e) => setEventLocation(e.target.value)}
style={{width: '666.5px'}}
/>
</td>
</tr>
</tbody>
</table>
<table className="options-table">
<tbody>
<tr>
<td
style={{ width: '150px' }}
>Date and Time:</td>
<td
style={{ width: '135px' }}
>From</td>
<td>
<input
type="text"
value={eventFromDate}
onChange={(e) => setEventFromDate(e.target.value)}
/>
</td>
<td
style={{ width: '150px' }}
>Finish</td>
<td>
<input
type="text"
value={eventFinishDate}
onChange={(e) => setEventFinishDate(e.target.value)}
/>
</td>
</tr>
</tbody>
</table>
<table className="options-table">
<tbody>
<tr>
<td
style={{ width: '150px' }}
>Colour of event:</td>
<td>
<input
type="text"
value={eventFromDate}
onChange={(e) => setEventFromDate(e.target.value)}
/>
</td>
</tr>
</tbody>
</table>
<table className="options-table">
<tbody>
<tr>
<td
style={{ width: '150px' }}
>Notes:</td>
<td>
<input
type="text"
value={eventFromDate}
onChange={(e) => setEventFromDate(e.target.value)}
style={{ width: '666.5px' }}
/>
</td>
</tr>
</tbody>
</table>
</form>
</div>
);
}
export default GenerateCalendar;
Also this is the code in GenerateCalendar.css:
.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 */
}
Right now it looks like that:
I want to make it to look like that:
I've attempted to set the width of the cells and adjust the styling, but I'm open to suggestions on a more effective way to achieve this alignment. Any insights or guidance would be greatly appreciated. Thank you!
Solution
it seems you are not very familiar with CSS rules. using different px
for width
does not give you a align content. your border-radius
is not working because of border-collapse: collapse;
.
i make your table align in this link but i also create another component (i prefer this) called CustomTable
. you actually do not need a table to make something like this. i am sorry, my code is not clean enough because i am at work. :))
Answered By - AlirezaAzizi
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.