How to align thead and tbody for an HTML table

March 23, 2023

I am trying to create a scheduler table and I can not align the rows in the table header thead > tr with the rows in the table body tbody > tr. Any advice on how I can do this would be much appreciated. I tried using display css properties but unfortunately I had no luck.

Here is my table component:

const headers = [
  "Work Area",
  "Monday",
  "Tuesday",
  ".....",
  ".....",

];

const columns = [
  "Morning Up Stairs",
  "Morning Down Stairs",
  "Morning Parking Lot",
  "Lunch A",
  "Lunch B",
  "Lunch C",
];

const Scheduler = () => {

  return (
    <div>
      <table>
        <thead>
          <tr>
            {headers.map((header) => (
              <th key={header}>{header}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {columns.map((colName, index) => (
            <tr key={index}>
              <td>{colName}</td>
              {headers.map((header, index) => (
                <td key={index}>
                  {index > 0 && (
                    <Select
                      value={selectedOption}
                      onChange={(selectedOption) =>
                        handleSelectChange(selectedOption, index, colName)
                      }
                      options={options}
                    />
                  )}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

Here is my CSS file:


table {
  margin-top: 5rem;
  margin-left: auto;
  margin-right: auto;
  border-spacing: 20px;
  border-collapse: separate;
  border: 1px solid black;
  padding: 5px;
}



.header {
  text-align: center;
  color: silver;
  font-weight: bold;
  text-transform: uppercase;
  padding: 5px;
  
}

Here is how the table currently looks:

>Solution :

So in your inner map, you have this right now:

{columns.map((colName, index) => (
            <tr key={index}>
              <td>{colName}</td>
              {headers.map((header, index) => (
                <td key={index}>
                  {index > 0 && (
                    <Select
                      value={selectedOption}
                      onChange={(selectedOption) =>
                        handleSelectChange(selectedOption, index, colName)
                      }
                      options={options}
                    />
                  )}
                </td>
              ))}
            </tr>
          ))}

But I think you probably want this instead

{columns.map((colName, index) => (
        <tr key={index}>
          <td>{colName}</td>
          {headers.map((header, index) => (
            {index > 0 && (
              <td key={index}>                  
                <Select
                  value={selectedOption}
                  onChange={(selectedOption) =>
                    handleSelectChange(selectedOption, index, colName)
                  }
                  options={options}
                />
            </td>
            )}
          ))}
        </tr>
      ))}