css - 来自 CSS noobie 的表格单元格固定宽度/溢出查询

Question

我正在尝试创建一个宽度为 50vw 且列宽固定为 100px 的表格。我还希望有一个垂直滚动，因为列的宽度超过了表格的宽度。我可以让表格滚动(通过将 display: block 添加到 .Table)，但单元格宽度不再是 100px；或者我可以将单元格宽度设置为 100 像素，但表格不再滚动并延伸到屏幕的一半。我试过设计 tbody 和 rows 等，但没有成功。非常感谢任何帮助。

此 CSS 生成非滚动表格:

.Table{
    width:50vw;
    height:30%;
    background-color: rgba(255,255,255,0.5);
    overflow: scroll;
    table-layout: fixed;
}

.Cell{
    width:100px;
    height:50px;
    text-align: center;
}

我的代码如下:

import React from 'react';
import classes from './app.module.css';
const results = (props) => {

  let i = 0;
  let player1Numbers = props.points.map(x => { return <td className={classes.Cell}>{[x][0][0]}</td> });
  let player2Numbers = props.points.map(x => { return <td className={classes.Cell}>{[x][0][1]}</td> });
  let headers = props.points.map(x => { i++; return <th className={classes.Cell}>Game {i}</th> });


  console.log(player1Data);

  return (<React.Fragment>
    <table className={classes.Table}>

      <tr className={classes.Row}>
        <th className={classes.Cell}>Player</th>
        {headers}

      </tr>
      <tbody className={classes.tbody}>
        <tr className={classes.Row}>
          <td className={classes.Cell}> Player</td>
          {player1Numbers}
        </tr>
        <tr>
          <td className={classes.Cell}>Nadal</td>
          {player2Numbers}
        </tr>
      </tbody>
    </table>
    <div className={classes.Space}></div>
  </React.Fragment>);
}

export default results

谢谢!

Answer 1

要将水平滚动条添加到“固定宽度”的表格中，您需要一个包装容器。请参阅下面的示例，其中我添加了一个周围的 div。

div {
  overflow-x: scroll;
  width: 350px; /* or 50vw */
  border: 1px solid green;
}

table {
    width:100%;
    height:30%;
    background-color: rgba(255,255,255,0.5);
    table-layout: fixed;
    border: 1px solid blue;
}

td {
    width:100px;
    height:50px;
    text-align: center;
    border: 1px solid red;
}

<div>
  <table>
    <tr>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>d</td>
      <td>e</td>
      <td>f</td>
      <td>g</td>
      <td>h</td>
    </tr>
  </table>
</div>