Question

我需要制作一个可滚动的项目或div列表，现在我找到了一种用表格做的方法，但这是一个可怕的设计。

也许如果在缩小浏览器窗口时表格得到更好的调整，我保留了表格，但现在表格对于响应式视图看起来很糟糕。

我需要一些帮助或建议

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
    /* Remove the navbar's default margin-bottom and rounded borders */ 
    .navbar {
      margin-bottom: 0;
      border-radius: 0;
    }

    /* Set height of the grid so .sidenav can be 100% (adjust as needed) */
    .row.content {height: 450px}

    /* Set gray background color and 100% height */
    .sidenav {
      padding-top: 20px;
      background-color: #f1f1f1;
      height: 100%;
    }

    /* Set black background color, white text and some padding */
    footer {
      background-color: #555;
      color: white;
      padding: 15px;
    }

    /* On small screens, set height to 'auto' for sidenav and grid */
    @media screen and (max-width: 767px) {
      .sidenav {
        height: auto;
        padding: 15px;
      }
      .row.content {height:auto;} 
    }

    table tbody, table thead
{
    display: block;
}

table tbody 
{
   overflow: auto;
   height: 200px;
}

table {
    width: 350px; /* can be dynamic */
}

th
{
    width: 75px;
}
  </style>
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">Logo</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>

<div class="container-fluid text-center">    
  <div class="row content">
    <div class="col-sm-3 sidenav">
     <div class="panel panel-default">
    <table class="table table-hover">
      <tbody>
        <tr>
          <td>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          </td>
          <td class="text-right text-nowrap">
            <button class="btn btn-xs btn-info">edit</button>
            <button class="btn btn-xs btn-warning">
              <span class="glyphicon glyphicon-trash"></span>
            </button>
          </td>
        </tr>
        <tr>
          <td>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          </td>
          <td class="text-right text-nowrap">
            <button class="btn btn-xs btn-info">edit</button>
            <button class="btn btn-xs btn-warning">
              <span class="glyphicon glyphicon-trash"></span>
            </button>
          </td>
        </tr>
        <tr>
          <td>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          </td>
          <td class="text-right text-nowrap">
            <button class="btn btn-xs btn-info">edit</button>
            <button class="btn btn-xs btn-warning">
              <span class="glyphicon glyphicon-trash"></span>
            </button>
          </td>
        </tr>
        <tr>
          <td>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          </td>
          <td class="text-right text-nowrap">
            <button class="btn btn-xs btn-info">edit</button>
            <button class="btn btn-xs btn-warning">
              <span class="glyphicon glyphicon-trash"></span>
            </button>
          </td>
        </tr>
        <tr>
          <td>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          </td>
          <td class="text-right text-nowrap">
            <button class="btn btn-xs btn-info">edit</button>
            <button class="btn btn-xs btn-warning">
              <span class="glyphicon glyphicon-trash"></span>
            </button>
          </td>
        </tr>
        <tr>
          <td>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          </td>
          <td class="text-right text-nowrap">
            <button class="btn btn-xs btn-info">edit</button>
            <button class="btn btn-xs btn-warning">
              <span class="glyphicon glyphicon-trash"></span>
            </button>
          </td>
        </tr>
        <tr>
          <td>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          </td>
          <td class="text-right text-nowrap">
            <button class="btn btn-xs btn-info">CCS</button>
            <button class="btn btn-xs btn-warning">
              <span class="glyphicon glyphicon-trash"></span>
            </button>
          </td>
        </tr>
        <tr>
          <td>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          </td>
          <td class="text-right text-nowrap">
            <button class="btn btn-xs btn-info">CCS</button>
            <button class="btn btn-xs btn-warning">
              <span class="glyphicon glyphicon-trash"></span>
            </button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
    </div>
    <div class="col-sm-7 text-left"> 
      <h1>Welcome</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      <hr>
      <h3>Test</h3>
      <p>Lorem ipsum...</p>
    </div>
  </div>
</div>

<footer class="container-fluid text-center">
  <p>Footer Text</p>
</footer>

</body>
</html>

Answer 1

您有一个表格的固定高度会产生问题。获得height: 100%。看看下面的代码

将此css添加到您的代码中

  .panel {
     height: 100%;
   }
  .table {
     height: inherit;
  }
  table tbody {
     height: 100%; !important
  }

  .sidenav {
    padding-bottom: 20px;
  }

  table tbody {
     overflow: auto;   
     /*height: 200px; remove this line from your code*/ 
  }

https://jsfiddle.net/princesodhi/sLmgdk4L/2/

Answer 2

只需将内容包装在固定高度的div中，然后overflow:scroll。例如：

.container{
   height:350px;
   overflow:scroll;
}

工作示例： https://jsfiddle.net/8d9qkea7/

将行转换为可滚动列表

2 个答案: