テーブルを反応的にするための最良の置き換え

私はテーブルを作っていますが、ある程度応答するので、私たちは皆それを知っています。誰もがテーブルタグを使用せずにテーブルを作るための最良の代替品になるか知っていますか？テーブルを反応的にするための最良の置き換え

私は基本的なテーブルhtmlを提供しました。それを手伝ってください。

<!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.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
    <h2>Basic Table</h2> 
 
    <p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>    
 
    <table class="table"> 
 
    <thead> 
 
     <tr> 
 
     <th>Firstname</th> 
 
     <th>Lastname</th> 
 
     <th>Email</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td>John</td> 
 
     <td>Doe</td> 
 
     <td>[email protected]</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Mary</td> 
 
     <td>Moe</td> 
 
     <td>[email protected]</td> 
 
     </tr> 
 
     <tr> 
 
     <td>July</td> 
 
     <td>Dooley</td> 
 
     <td>[email protected]</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div> 
 

 
</body> 
 
</html>

出典

2017-02-01 Mohammed

完全応答テーブル

@media only screen and (max-width: 800px) { 
 
    
 
    /* Force table to not be like tables anymore */ 
 
    #no-more-tables table, 
 
    #no-more-tables thead, 
 
    #no-more-tables tbody, 
 
    #no-more-tables th, 
 
    #no-more-tables td, 
 
    #no-more-tables tr { 
 
    display: block; 
 
    } 
 
    
 
    /* Hide table headers (but not display: none;, for accessibility) */ 
 
    #no-more-tables thead tr { 
 
    position: absolute; 
 
    top: -9999px; 
 
    left: -9999px; 
 
    } 
 
    
 
    #no-more-tables tr { border: 1px solid #ccc; } 
 
    
 
    #no-more-tables td { 
 
    /* Behave like a "row" */ 
 
    border: none; 
 
    border-bottom: 1px solid #eee; 
 
    position: relative; 
 
    padding-left: 50%; 
 
    white-space: normal; 
 
    text-align:left; 
 
    } 
 
    
 
    #no-more-tables td:before { 
 
    /* Now like a table header */ 
 
    position: absolute; 
 
    /* Top/left values mimic padding */ 
 
    top: 6px; 
 
    left: 6px; 
 
    width: 45%; 
 
    padding-right: 10px; 
 
    white-space: nowrap; 
 
    text-align:left; 
 
    font-weight: bold; 
 
    }

<!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.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
    <h2>Basic Table</h2> 
 
    <p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>    
 
    <table class="table"> 
 
    <thead> 
 
     <tr> 
 
     <th>Firstname</th> 
 
     <th>Lastname</th> 
 
     <th>Email</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td>John</td> 
 
     <td>Doe</td> 
 
     <td>[email protected]</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Mary</td> 
 
     <td>Moe</td> 
 
     <td>[email protected]</td> 
 
     </tr> 
 
     <tr> 
 
     <td>July</td> 
 
     <td>Dooley</td> 
 
     <td>[email protected]</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div> 
 

 
</body> 
 
</html>

これは私のために働きました。リファレンス： - https://elvery.net/demo/responsive-tables/

出典

2017-02-01 11:28:34 Mohammed

テーブルを反応的にするための最良の置き換え

答えて

関連する問題