表格主體將右對齊

Question

我正在使用反應。
表格將右對齊。
我想完整顯示它而不是右對齊。 （寬度：100%）。
我想擴展表格，使其不是右對齊，而是全寬，使其成為父元素的 div 標簽（寬度：84vw）。

代碼

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

請參考這個 沙盒

我的反應代碼與您的代碼有些相似，我添加了 css 代碼來做到這一點。

重要提示：如果您在thead標記中添加td而不是th ，則它不起作用。
position: sticky不適用於thead ，它適用於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;
}