表格主体将右对齐

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;
}