使用表在html中創建可滾動矩陣

我希望在html頁面中有類似矩陣的東西。表/矩陣的內容應該是可滾動的，但是行和列標題應該是固定的，以便它們始終可見。使用表在html中創建可滾動矩陣

我試圖做到這一點有3個表：一個用於列標題，一個用於行標題，另一個用於內容本身。當所有內容都適合在頁面上時，它看起來很好。但是，只要沒有足夠的空間來容納所有的內容，整個事情就會變得混亂起來。我怎樣才能防止這種情況發生，並使表總是出現在一行上，並根據需要添加滾動條而不是將內容表移動到下一行？

messed up matrix matrix

這是我的html：

<div class="container"> 
     <div class="tableparent"> 
       <table class = "table rowtitle table-striped"> 
        <tr><td>Logo</td></tr> 
        <tr><td>1</td></tr> 
        <tr><td>2</td></tr> 
        <tr><td>3</td></tr> 
        <tr><td>4</td></tr> 
        <tr><td>5</td></tr> 
        <tr><td>6</td></tr> 
       </table> 


       <table class="table columntitle table-striped"> 

        <tr> 
         <th>1</th> 
         <th>2</th> 
         <th>3</th> 
         <th>4</th> 
         <th>5</th> 
        </tr> 
       </table> 
       <table class="table table-striped"> 

        <tr> 
         <td>X</td> 
         <td></td> 
         <td>X</td> 
         <td></td> 
         <td></td> 
        </tr> 


        <tr> 
         <td>X</td> 
         <td></td> 
         <td></td> 
         <td>X</td> 
         <td></td> 
        </tr> 
        <tr> 
         <td>X</td> 
         <td></td> 
         <td>X</td> 
         <td></td> 
         <td></td> 
        </tr>      
        <tr> 
         <td></td> 
         <td>X</td> 
         <td>X</td> 
         <td>X</td> 
         <td>X</td> 
        </tr>      
        <tr> 
         <td>X</td> 
         <td></td> 
         <td>X</td> 
         <td>X</td> 
         <td></td> 
        </tr> 
        <tr> 
         <td>X</td> 
         <td></td> 
         <td></td> 
         <td></td> 
         <td>X</td> 
        </tr> 


       </table> 


    </div>

這是CSS的相關部分：

table { 
     max-width: 100%; 
     background-color: transparent; 
     border-collapse: collapse; 
     border-spacing: 0; 
    } 

    .table { 
     white-space: nowrap; 
    } 

    .table th, 
    .table td { 
     padding: 8px; 
     line-height: 20px; 
     text-align: center; 
     vertical-align: top; 
     border: 1px solid #dddddd; 
    } 

    .table th { 
     font-weight: bold; 
    } 

.table-striped tbody > tr:nth-child(odd) > td, 
.table-striped tbody > tr:nth-child(odd) > th { 
    background-color: #f9f9f9; 
} 

.rowtitle { 
    float: left; 
    padding: 8px; 
    border-right: 0px; 
    height: 200px; 
} 

.rowtitle th, 
.rowtitle td { 
    border-right: 0px; 
} 

.columntitle { 
    padding: 8px; 
    border-bottom: 0px; 
} 

.columntitle th, 
.columntitle td { 
    border-bottom: 0px; 
} 

.tableparent { 
    width: 100%; 
}

任何幫助表示讚賞！

來源

2013-07-01 friday

只是想知道 - 你爲什麼不把一切都放在一張桌子？ – fvu

檢查datatables.net。這可能有你正在尋找的功能，而不需要重新發明輪子。我想你會繼續尋找那些單獨使用會破壞的功能。 –

我不能把它放在一張表中，因爲我想讓行和列可以滾動，並且行或列標題必須隨內容一起滾動，但也需要始終可見。因此，如果我將水平滾動到「4」行，則行標題應保持可見/固定在左側，而列1,2和3將滾動並且不再對用戶可見。我需要這個，因爲在這兩個方向上都可以有很多像100這樣的條目。 – friday

This works in all modern browsers that I tried。我不得不在一段時間內搞砸幾件事情，但結果似乎是你想要的。訣竅是把position:absolute放在首行和內容部分。我改變了你的HTML稍微以及

HTML（輕微改變）：

<div class="container"> 
    <div class="tableparent"> 
      <table class = "table rowtitle"> 
       <tr><td>Logo</td></tr> 
       <tr><td>1</td></tr> 
       <tr><td>2</td></tr> 
       <tr><td>3</td></tr> 
       <tr><td>4</td></tr> 
       <tr><td>5</td></tr> 
       <tr><td>6</td></tr> 
      </table> 


      <table class="table columntitle"> 

       <tr> 
        <th></th> 
        <th>1</th> 
        <th>2</th> 
        <th>3</th> 
        <th>4</th> 
        <th>5</th> 
       </tr> 
      </table> 
      <table class="table content table-striped"> 

       <tr> 
        <td>X</td> 
        <td></td> 
        <td>X</td> 
        <td></td> 
        <td></td> 
        <td>X</td> 
       </tr> 


       <tr> 
        <td>X</td> 
        <td></td> 
        <td></td> 
        <td>X</td> 
        <td></td> 
        <td>X</td> 
       </tr> 
       <tr> 
        <td>X</td> 
        <td></td> 
        <td>X</td> 
        <td></td> 
        <td></td> 
        <td></td> 
       </tr>      
       <tr> 
        <td></td> 
        <td>X</td> 
        <td>X</td> 
        <td>X</td> 
        <td>X</td> 
        <td>X</td> 
       </tr>      
       <tr> 
        <td>X</td> 
        <td></td> 
        <td>X</td> 
        <td>X</td> 
        <td></td> 
        <td></td> 
       </tr> 
       <tr> 
        <td>X</td> 
        <td></td> 
        <td></td> 
        <td></td> 
        <td>X</td> 
        <td>X</td> 
       </tr> 


      </table> 


</div>

CSS：

table {  
     border-collapse:collapse; 
     table-layout:fixed; 
    } 
table * { 
    height:50px; 
    width:50px; 
    min-width:50px; 
    min-height:50px; 
    margin:0px; 
    padding:0px; 
} 

.rowtitle { 
    float:left; 
    opacity:1; 
    z-index:3; 
} 

    .table th, 
    .table td { 
     text-align: center; 
     border: 1px solid #dddddd; 
    } 

    .table th { 
     font-weight: bold; 
    } 

.table-striped tbody > tr:nth-child(odd) > td, 
.table-striped tbody > tr:nth-child(odd) > th { 
    background-color: #f9f9f9; 
} 

.columntitle { 
    z-index:1; 
    position:fixed; 
} 

.content { 
    position:fixed; 
    left:60px; 
    top:59px; 
    width:255px; 
    overflow-x:auto; 
    display: block; 
}

來源

2013-07-01 14:56:41

使用表在html中創建可滾動矩陣

回答

相關問題