表格单元格固定宽度/溢出查询从CSS菜鸟

Question

我正在尝试创建一个宽度为 50vw 的表，该表的固定列宽为 100px。我还想要一个垂直滚动，因为列的宽度超过了表格的宽度。我可以让表格滚动(通过添加显示：块到 .表(，但单元格宽度不再为 100px;或者我可以将单元格宽度设置为 100px，但表格不再滚动并延伸到屏幕的一半。我尝试过样式 tbody 和行等，但没有运气。任何帮助将不胜感激。

此 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>