使用rowspan和colspan屬性修復表頭並滾動

我想將表頭修復爲一個位置並允許表格的其餘內容可滾動（下面的代碼）。我在表標題行中使用colspan和rowsapn屬性。有什麼方法可以解決它嗎？使用rowspan和colspan屬性修復表頭並滾動

<html> 
    <body> 
    <div id="secondtable" style="width:100%; height:380px; overflow:auto;"> 
    <table class="mytable" style="width:100%; border-width:thin;" border="1"  cellpadding="9" cellspacing="0" align="center">  
       <tr class="tt" bgcolor="#0B2B62"> 
        <th>No.</th> 
        <th>Store Name</th> 
        <th>Receipts</th> 
        <th colspan=2>Receipts vs Budget</th> 
        <th colspan=3>Receipts vs Last Year</th> 
        <th>Contribution</th> 
        <th colspan=2>Contribution vs Budget</th> 
       </tr> 
       <tr class="tt" style="background-color:#C2C2C2;"> 
        <td></td> 
        <td></td> 
        <td></td> 
        <td><font color="black">Var &pound;</font></td> 
        <td><font color="black">Var %</td> 
        <td><font color="black">Var &pound;</font></td> 
        <td><font color="black">Var %</font></td> 
        <td><font color="black">Var</font></td> 
        <td></td> 
        <td><font color="black">Var &pound;</font></td> 
        <td><font color="black">Var %</font></td> 
       </tr> 
       <tr class="tt" style="background-color:#D7F2FF"> 
        <td>&nbsp;</td> 
        <td></td> 
        <td></td> 
        <td></td> 
        <td></td> 
        <td></td> 
        <td></td> 
        <td></td> 
        <td></td> 
        <td></td> 
        <td></td> 
       </tr> 
     </table> 
</div> 
</body> 
</html>

//這是CSS

table { 

border-collapse:separate; 
border-spacing: 0; 
color:white; 
background-color:white; 
border: 1px solid black; 
border-radius: 8px; 
-moz-border-radius: 5px; 
padding: 5px; 
font-family:sans-serif; 
} 

.mytable{ 
background-color:#014483; 
} 

.tt{ 
border-color:#2B4F81; 
} 
.ttt{ 
background-color:#BBDBF4; 
border:#2B4F81; 
}

來源

2015-12-28 MURTUJA BHATIA

在這裏看到演示如何want- http://www.aspsnippets.com/Demos/1049/ –

您可以使用它可以幫助ü

.mytable tr th 
{ 
table-layout: fixed; 
}

來源

2015-12-28 05:26:51

我想保留表頭修復，剩下的表格內容應該可以滾動。我的代碼中的問題是整個表也是滾動標題，而我想保持表頭在它的地方 –

.mytable tr { table-layout：fixed; }您可以使用它 –

這不是工作 https://jsfiddle.net/vasi_32/tvkeypxk/10/ – brk

這可能會幫助您：

html, body{ 
    margin:0; 
    padding:0; 
    height:100%; 
} 
section { 
    position: relative; 
    border: 1px solid #000; 
    padding-top: 37px; 
    background: #500; 
} 
section.positioned { 
    position: absolute; 
    top:100px; 
    left:100px; 
    width:800px; 
    box-shadow: 0 0 15px #333; 
} 
.container { 
    overflow-y: auto; 
    height: 200px; 
} 
table { 
    border-spacing: 0; 
    width:100%; 
} 
td + td { 
    border-left:1px solid #eee; 
} 
td, th { 
    border-bottom:1px solid #eee; 
    background: #ddd; 
    color: #000; 
    padding: 10px 25px; 
} 
th { 
    height: 0; 
    line-height: 0; 
    padding-top: 0; 
    padding-bottom: 0; 
    color: transparent; 
    border: none; 
    white-space: nowrap; 
} 
th div{ 
    position: absolute; 
    background: transparent; 
    color: #fff; 
    padding: 9px 25px; 
    top: 0; 
    margin-left: -25px; 
    line-height: normal; 
    border-left: 1px solid #800; 
} 
th:first-child div{ 
    border: none; 
}

來源

2015-12-28 05:49:03

沒有幫助我的代碼:( –

試過我最好的:(（（（（（（（（（（（（ –

您可能需要的地方你的標題在一個類.sticky或無論你喜歡什麼和合適的CSS。

HTML

<div class="sticky"> 
    <table class="mytable" style="width:100%; border-width:thin;" border="1" cellpadding="9" cellspacing="0" align="center"> 
     <tr class="tt" bgcolor="#0B2B62"> 
     <th>No.</th> 
     <th>Store Name</th> 
     <th>Receipts</th> 
     <th colspan=2>Receipts vs Budget</th> 
     <th colspan=3>Receipts vs Last Year</th> 
     <th>Contribution</th> 
     <th colspan=2>Contribution vs Budget</th> 
     </tr> 
    </table> 
    </div>

CSS

.sticky { 
    position: fixed; 
    top: 2px; 
    width: 96.5%; 
}

在這裏看到的例子：http://codepen.io/omerblink/pen/wMzLow?editors=110

來源

2015-12-28 06:00:53 Omer

謝謝....但它沒有在一個適當的對齊...我想解決這是最imp的我,,,因爲我已經用rowspan和colspan進入它 –

讓我檢查一下... – Omer

好吧，我已經更新了問題和筆......你現在可以檢查嗎？ – Omer

我懷疑，你將能夠用一個表來達致這。所以我實際上創建了兩個表格，一個用於標題，另一個用於正文&，前者始終是固定的。另外我假設列數是靜態的。下面是代碼

<!--Header part-->  
<div id="firsttable" style="width:100%;"> 
     <table class="mytable" style="width:100%; border-width:thin;" border="1" cellpadding="9" cellspacing="0" align="center"> 
      <thead><tr class="tt " bgcolor="#0B2B62"> 

      <th id="no">No.</th> 
      <th id="sto">Store Name</th> 
      <th id="res">Receipts</th> 
      <th colspan=2 id="rb">Receipts vs Budget</th> 
      <th colspan=3 id="rl">Receipts vs Last Year</th> 
      <th id="con">Contribution</th> 
      <th colspan=2 id="cb">Contribution vs Budget</th> 
      </tr> 
      </thead> 
      </table> 
      </div> 

<!-- body part --> 

    <div id="secondtable" style="width:100%; height:380px; overflow:auto;"> 
       <table class="mytable" style="width:100%; border-width:thin;" border="1" cellpadding="9" cellspacing="0" align="center"> 

       <tr class="tt" style="background-color:#C2C2C2;"> 
       <td headers="no">A</td> 
       <td headers="sto">B</td> 
       <td headers="res">C</td> 
       <td colspan="2" headers="rb"><div style="color:black">Var &pound;</div><div style="color:black">Var %</div></td> 
       <td colspan="3"><div style="color:black">Var &pound;</div><div>Var %</div><div>Var</div></td> 
       <td>D</td> 
       <td colspan="2"><div style ="color:black">Var &pound;</div><div style="color:black">Var %</div></td> 
       </tr> 

       <!-- Include multiple tr to get scrollbar --> 
      </table> 
      </div>

CSS

table { 
border-collapse:separate; 
border-spacing: 0; 
color:white; 
background-color:white; 
border: 1px solid black; 
border-radius: 8px; 
-moz-border-radius: 5px; 
padding: 5px; 
font-family:sans-serif; 
} 

.mytable{ 
background-color:#014483; 
} 

.tt{ 
border-color:#2B4F81; 
} 
.ttt{ 
background-color:#BBDBF4; 
border:#2B4F81; 
} 

td,th{ 
    max-width:10px; 

    } 
.mytable div{ 
    max-width:40%; 
    display:inline 
    }

WORKING COPY

注意：當這個滾動條是可見的，你可能會看到標題列不同步與身體列。這是因爲滾動條有一個寬度，它將佔用一些空間。在這種情況下，您可以調整任何正文列的寬度，使其同步。我也明白基本上你需要7列可以有子列。因此，在身體我已經創建7列和div複製子欄目

希望這將有助於

來源

2015-12-28 08:22:05 brk

使用rowspan和colspan屬性修復表頭並滾動

回答

相關問題