javascript - 表格不断调整大小而不溢出

Question

我试图让我的表格在 x 轴上溢出，而不是在浏览器宽度超过 900px 后调整大小。

这是我的代码:

<div className='jobTableTop'>
<table className='jobsTable'>
  <tbody>
    <tr className='jobsTableHeader'>
      <td style={{"color": "lightgray"}}>BY</td>
      <td style={{"color": "lightgray"}}>JOB TITLE</td>
      <td style={{"color": "lightgray"}}>OPTION</td>
      <td style={{"color": "lightgray"}}>LOCATION</td>
      <td style={{"color": "lightgray"}}>WAGE</td>
      <td style={{"padding-top": "0px"}}></td>
    </tr>
    {this.props.dataToShow.map(function (item, index) {
      return (
        (index >= minItem && index <= maxItem) ?
          <tr key={item.id}> 
            <td>{item.company}</td>
            <td>{item.title}</td>
            <td>{item.option}</td>
            <td>{item.location}</td>
            <td>{item.wage}</td>
            <td style={{"padding-top": "0px"}}>
              <a href={'/job-detail/' + item.id}>
                <Button className={classes.button} style={{"font-size": "20px"}} raised color="accent">
                  Apply
                </Button>
              </a>
            </td>
          </tr>
          :
          ''
        )})}
      </tbody>
    </table>
   </div>

这是 jsx/html 代码

这是CSS:

@media screen and (max-width: 900px){
    .jobsTable{
        overflow: hidden;
    }
}
.jobsTable tr {
border-bottom: 1px solid lightgray;
display: flex;
}
.jobsTable tr td {
    width: 16.6%;
    height: 40px;
    padding-top: 20px;
    font-size: 20px;
    vertical-align: middle;
    color: black;
}

所以当它低于 900px 时，我想要它，这样就有一个滚动条，而不是表格变小，无论我做什么，似乎都没有让它做到这一点。我试图使其移动兼容，而不制作单独的网站版本。

编辑已更改:

我改变的只是这个。

.jobTableTop {
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
}

我必须将网页设置为 750 像素左右，而不是 900 像素。我将如何实现上述目标。

Answer 1

您必须使用@media媒体查询并编写您的css，如下所示:

@media screen and (max-width: 900px){
  .jobsTable{
    width: 100%;
    overflow-y: hidden;
    overflow-x: auto;
  }
}