表不断调整大小而不会溢出

Question

I'm trying to make my table overflow on the x axis instead of resizing once it gets past 900px browser width.

Here is my code:

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

that is the jsx/html code

here is the 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;
}

so when it goes under 900px i want it so that theres a scroll bar instead of the table going smaller no matter what i seem to do nothing makes it do this. Im trying to make it mobile compatible without making a separate version of the site.

edit changed:

all i changed was this.

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

i have to make the webpage around 750px instead of 900px. how would i achieve said goal.

Answer 1

All you need to need to do little change in your CSS code as below. Additionally, you can also define width: 100%; if you want to make the full available space used by the table. I have also added this code in CSS

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

fixed code section not being all in grey -Andy

Answer 2

我通过将360px的百分比提高到大约300％并从那里解决所有其他尺寸的屏幕来解决上述问题

Answer 3

you must use @media media query and write your css like this:

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