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

【问题标题】：Tables cell fixed width / overflow query from a CSS noobie来自 CSS noobie 的表格单元格固定宽度/溢出查询
【发布时间】：2019-09-17 02:31:58
【问题描述】：

我正在尝试创建一个宽度为 50vw 的表格，其固定列宽为 100px。我还想要一个垂直滚动，因为列的宽度超过了表格的宽度。我可以让表格滚动（通过将 display: 块添加到 .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

谢谢！

【问题讨论】：

标签： css

【解决方案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>

【讨论】：