The table body will be right-aligned

Question

I am using react.
The table will be right-aligned.
I would like to display it in its entirety instead of right-justified. (width: 100%).
I'd like to expand the table so that it's not right-aligned, but full width so that it's the parent element's div tag (width: 84vw).

code

import "./styles.css";

export default function App() {
  return (
    <>
      <div
        style={{
          borderWidth: "2px",
          borderColor: "#C7CED7",
          borderStyle: "solid",
          width: "84vw"
        }}
      >
        <table
          style={{
            width: "100%",
            display: "flex",
            flexDirection: "column"
          }}
        >
          <thead>
            <tr>
              <th>boxA</th>
              <th>boxB</th>
              <th>boxC</th>
              <th>BoxD</th>
              <th>BoxE</th>
              <th>BoxF</th>
            </tr>
          </thead>
          <tbody style={{ height: "100px", overflowY: "auto" }}>
            {data.map((d) => (
              <tr key={d.id}>
                <td>{d.a}</td>
                <td>{d.b}</td>
                <td>{d.c}</td>
                <td>{d.d}</td>
                <td>{d.e}</td>
                <td>{d.f}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </>
  );
}

Answer 1

Please refer this sandbox

My react code is some similar with your code, and I added css codes to do it.

Important: if you add td instead of th in thead tag, it doesn't work.
position: sticky doesn't work for thead , it works for th .

.table-container {
  width: 84vw;
  margin: auto;
  max-height: 400px;
  overflow-y: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}

thead {
  position: sticky;
  top: 0;
}

td,
th {
  padding: 1em 0;
}

th {
  background-color: #99ff99;
}

td {
  border-bottom: 1px solid #99ff99;
}