表不断调整大小不溢出答案

【问题标题】：table keeps resizing not overflow表不断调整大小不溢出
【发布时间】：2018-05-20 04:53:41
【问题描述】：

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

这是我的代码：

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

所以当它低于 900 像素时，我希望它有一个滚动条，而不是表格变小，无论我做什么，我似乎什么都不做。我试图在不制作单独版本的网站的情况下使其与移动设备兼容。

编辑已更改：

我改变的只是这个。

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

我必须使网页大约 750 像素而不是 900 像素。我将如何实现上述目标。

【问题讨论】：

标签： javascript html css reactjs html-table

【解决方案1】：

您只需对 CSS 代码进行少量更改，如下所示。此外，如果要使表使用完整的可用空间，还可以定义width: 100%;。我还在 CSS 中添加了这段代码

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

固定的代码部分不是全部都是灰色的 -Andy

【讨论】：

【解决方案2】：

我通过将 360 像素的 % 提高到大约 300% 来解决上述问题，并从那里解决了所有其他屏幕尺寸的问题

【讨论】：

【解决方案3】：

您必须使用@media 媒体查询并像这样编写您的css：

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

【讨论】：