將行變換爲滾動列表

我需要製作一個可滾動的項目或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>

來源

2017-06-30 David Edgar

你有固定的高度，它創建了一個問題表。得到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/

來源

2017-06-30 09:17:13

我不知道爲什麼，但即使在更改後，我的表格仍然不可滾動 –

是否在jsfiddle中檢查過它？ https://jsfiddle.net/princesodhi/sLmgdk4L/2/ –

是的，我有另一個問題，我在我的標題中有dateTime Picker。並且現在不能正確顯示。 –

只是包裝與固定高度，overflow:scroll在DIV的內容。例如：

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

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

來源

2017-06-30 09:06:11 Michaell94

固定的高度是不是'溢出的要求：scroll';） –

將行變換爲滾動列表

回答

相關問題