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

我必须使网页大约750px而不是900px。我将如何实现这一目标。

Answer 1

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

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

固定代码部分并非全部为灰色--Andy

Answer 2

我修正了上述问题，将360％的百分比提高到300％左右，然后从那里开始对所有其他尺寸的屏幕进行处理

Answer 3

您必须使用<?php /* login.php */ session_start(); if( isset( $_POST['email'],$_POST['name'],$_POST['password'] ) ){ $email=$_POST['email']; $name=$_POST['name']; $password=$_POST['password']; $sql='select `password` from `users` where `email`=?'; $stmt=$conn->prepare( $sql ); if( $stmt ){ $stmt->bind_param('s',$email); $stmt->execute(); $stmt->store_result(); $stmt->bind_result( $dbpwd ); $stmt->fetch(); $stmt->free_result(); $stmt->close(); /* here is where, if the password was hashed, you would use `password_verify` but in this case it is not. */ if( $dbpwd==$password ){ /* ok */ $_SESSION['Email_Ses'] = $email; $_SESSION['Name_Ses'] = $name; } else { /* bogus */ } } } ?>媒体查询并将@media写为：

css

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

3 个答案: