1. 首頁
  2. 問答
  3. 如何修復表頭和滾動錶行於下表格式

如何修復表頭和滾動錶行於下表格式

2016-12-01 29 views
-3

我有表中的HTML格式如下：如何修復表頭和滾動錶行於下表格式

th.th { 
 
    position: fixed; 
 
    background-color: white; 
 
} 
 
th.tl { 
 
    position: fixed; 
 
    background-color: white; 
 
}
<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="style.css"> 
 

 
</head> 
 

 
<body> 
 
    <table class="report" border="0" cellspacing="0"> 
 
    <tbody> 
 
     <tr> 
 
     <th class="xbrl-review" rowspan="2"></th> 
 
     <th class="tl custom-border" colspan="1" rowspan="2"> 
 
      <div style="width: 200px;"><strong>Document and Entity Information<br></strong> 
 
      </div> 
 
     </th> 
 
     <th class="xbrl-review"></th> 
 
     <th class="th" colspan="1">3 Months Ended</th> 
 
     <th class="xbrl-review"></th> 
 
     <th class="th" colspan="1"></th> 
 
     </tr> 
 
     <tr> 
 
     <th class="xbrl-review"></th> 
 
     <th class="th"> 
 
      <div class="xbrl-prop-context"> 
 
      <div> 
 
       <div>Sep. 30, 2014</div> 
 
      </div> 
 
      </div> 
 
     </th> 
 
     <th class="xbrl-review"></th> 
 
     <th class="th"> 
 
      <div class="xbrl-prop-context"> 
 
      <div> 
 
       <div>Nov. 07, 2014</div> 
 
      </div> 
 
      </div> 
 
     </th> 
 
     </tr> 
 
     <tr class="re"> 
 
     <td class="xbrl-review"></td> 
 
     <td valign="top" class="pl custom-border ex"><a class="a xbrl-prop-element" href="javascript:void(0);" style="margin-left:0em;"><i class="icon-star blue">&#xA0;</i><strong><span class="xbrl-data-text">Document and Entity Information</span></strong></a> 
 
     </td> 
 
     <td class="xbrl-review"></td> 
 
     <td class="text xbrl-prop-data custom-border"><span class="xbrl-data-text">&#xA0;</span> 
 
     </td> 
 
     <td class="xbrl-review"></td> 
 
     <td class="text xbrl-prop-data custom-border"><span class="xbrl-data-text">&#xA0;</span> 
 
     </td> 
 
     </tr> 
 
     <tr class="re"> 
 
     <td class="xbrl-review"></td> 
 
     <td valign="top" class="pl custom-border"><a class="a xbrl-prop-element" href="javascript:void(0);" style="margin-left:1em;"><span class="xbrl-data-text">Entity Central Index Key</span></a> 
 
     </td> 
 
     <td class="xbrl-review"></td> 
 
     <td class="text xbrl-prop-data custom-border"><span class="xbrl-data-text">0001501078</span> 
 
     </td> 
 
     <td class="xbrl-review"></td> 
 
     <td class="text xbrl-prop-data custom-border"><span class="xbrl-data-text">111111111</span> 
 
     </td> 
 
     </tr> 
 
     <tr class="re"> 
 
     <td class="xbrl-review"></td> 
 
     <td valign="top" class="pl custom-border"><a class="a xbrl-prop-element" href="javascript:void(0);" style="margin-left:1em;"><span class="xbrl-data-text">Entity Central Index Key</span></a> 
 
     </td> 
 
     <td class="xbrl-review"></td> 
 
     <td class="text xbrl-prop-data custom-border"><span class="xbrl-data-text">0001501078</span> 
 
     </td> 
 
     <td class="xbrl-review"></td> 
 
     <td class="text xbrl-prop-data custom-border"><span class="xbrl-data-text">2222222</span> 
 
     </td> 
 
     </tr> 
 
     <tr class="ro"> 
 
     <td class="xbrl-review"></td> 
 
     <td valign="top" class="pl custom-border"><a class="a xbrl-prop-element" href="javascript:void(0);" style="margin-left:1em;"><span class="xbrl-data-text">Document Type</span></a> 
 
     </td> 
 
     <td class="xbrl-review"></td> 
 
     <td class="text xbrl-prop-data custom-border"><span class="xbrl-data-text">10-Q</span> 
 
     </td> 
 
     <td class="xbrl-review"></td> 
 
     <td class="text xbrl-prop-data custom-border"><span class="xbrl-data-text">3333333</span> 
 
     </td> 
 
     </tr> 
 
     <tr class="re"> 
 
     <td class="xbrl-review"></td> 
 
     <td valign="top" class="pl custom-border"><a class="a xbrl-prop-element" href="javascript:void(0);" style="margin-left:1em;"><span class="xbrl-data-text">Document Period End Date</span></a> 
 
     </td> 
 
     <td class="xbrl-review"></td> 
 
     <td class="text xbrl-prop-data custom-border"><span class="xbrl-data-text">Sep. 30, 
 
    2014</span> 
 
     </td> 
 
     <td class="xbrl-review"></td> 
 
     <td class="text xbrl-prop-data custom-border"><span class="xbrl-data-text">4444444</span> 
 
     </td> 
 
     </tr> 
 
     <tr class="ro"> 
 
     <td class="xbrl-review"></td> 
 
     <td valign="top" class="pl custom-border"><a class="a xbrl-prop-element" href="javascript:void(0);" style="margin-left:1em;"><span class="xbrl-data-text">Amendment Flag</span></a> 
 
     </td> 
 
     <td class="xbrl-review"></td> 
 
     <td class="text xbrl-prop-data custom-border"><span class="xbrl-data-text">false</span> 
 
     </td> 
 
     <td class="xbrl-review"></td> 
 
     <td class="text xbrl-prop-data custom-border"><span class="xbrl-data-text">true</span> 
 
     </td> 
 
     </tr> 
 
     <tr class="re"> 
 
     <td class="xbrl-review"></td> 
 
     <td valign="top" class="pl custom-border"><a class="a xbrl-prop-element" href="javascript:void(0);" style="margin-left:1em;"><span class="xbrl-data-text">Current Fiscal Year End Date</span></a> 
 
     </td> 
 
     <td class="xbrl-review"></td> 
 
     <td class="text xbrl-prop-data custom-border"><span class="xbrl-data-text">--06-30</span> 
 
     </td> 
 
     <td class="xbrl-review"></td> 
 
     <td class="text xbrl-prop-data custom-border"><span class="xbrl-data-text">4566756</span> 
 
     </td> 
 
     </tr> 
 
     <tr class="ro"> 
 
     <td class="xbrl-review"></td> 
 
     <td valign="top" class="pl custom-border"><a class="a xbrl-prop-element" href="javascript:void(0);" style="margin-left:1em;"><span class="xbrl-data-text">Entity Filer Category</span></a> 
 
     </td> 
 
     <td class="xbrl-review"></td> 
 
     <td class="text xbrl-prop-data custom-border"><span class="xbrl-data-text">Smaller Reporting Company</span> 
 
     </td> 
 
     <td class="xbrl-review"></td> 
 
     <td class="text xbrl-prop-data custom-border"><span class="xbrl-data-text">Harshal</span> 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</body> 
 

 
</html>

眼下td內容也正在朝着頂部和下方th所以它完全搞砸了。 我的期望是格式良好的Html與修復表頭（列標題）和可滾動錶行。請幫助我。

來源

2016-12-01 Harshal Bhamare

+1

好像你的第二個標題塊缺少列''可能是你的問題。你可以使用colspan來糾正這一點。 –

+0

沒有什麼缺少這個給定的輸入html。 –

+1

列出你需要的表格標題 – Logeshwaran

回答

1

您需要避免使用內聯樣式。使用單獨的CSS樣式表將有助於對錶格進行一攬子更改。作爲一個例子，這裏是你的桌子有一些基本的風格。

https://jsfiddle.net/61qktez1/1/

的東西，有助於劃分表中的行這樣的：

table tbody tr:nth-of-type(2n) { 
    background:#f0f0f0; 
}

來源

2016-12-01 10:14:15 mariuspearson

+0

先生，仍然沒有得到預期的output.want表/列標題固定和表格行滾動 –

1

這裏是我把它給你一個例子。我希望你也期待着這一點。

.container{ 
 
width:400px; \t 
 
} 
 
.scroallable_div{ 
 
    height: 120px; 
 
    overflow: scroll; 
 
    overflow-x: hidden; 
 
}
<div class="container"> 
 
<table> 
 
\t <thead> 
 
\t <tr> 
 
    \t <th width="120px">First</th> 
 
     <th width="120px">Second</th> 
 
<th width="120px">Third</th> 
 
     <th width="120px">Fourth</th> 
 
     <th width="120px">Fifth</th> 
 
    </tr> 
 
    
 
    </thead> 
 
</table> 
 
<div class="scroallable_div"> 
 
<table> 
 
      <thead> 
 
      <tr> 
 
       <th width="120px"></th> 
 
       <th width="120px"></th> 
 
       <th width="120px"></th> 
 
       <th width="120px"></th> 
 
      </tr> 
 
      </thead> 
 
    <tbody> 
 
    \t \t <tr> 
 
      \t \t <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
      
 
      </tr> 
 
      <tr> 
 
      \t \t <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
      
 
      </tr> 
 
      <tr> 
 
      \t \t <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
      
 
      </tr> 
 
      <tr> 
 
      \t \t <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
      
 
      </tr> 
 
      <tr> 
 
      \t \t <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
      
 
      </tr> 
 
      <tr> 
 
      \t \t <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
      
 
      </tr> 
 
      <tr> 
 
      \t \t <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
      
 
      </tr> 
 
      <tr> 
 
      \t \t <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
      
 
      </tr> 
 
      <tr> 
 
      \t \t <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
      
 
      </tr> 
 
      <tr> 
 
      \t \t <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
      
 
      </tr> 
 
      <tr> 
 
      \t \t <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
      
 
      </tr> 
 
      <tr> 
 
      \t \t <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
      
 
      </tr> 
 
      <tr> 
 
      \t \t <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
      
 
      </tr> 
 
      <tr> 
 
      \t \t <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
      
 
      </tr> 
 
      <tr> 
 
      \t \t <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
      
 
      </tr> 
 
      <tr> 
 
      \t \t <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
      
 
      </tr> 
 
      <tr> 
 
      \t \t <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
      
 
      </tr> 
 
      <tr> 
 
      \t \t <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
      
 
      </tr> 
 
      <tr> 
 
      \t \t <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
      
 
      </tr> 
 
      <tr> 
 
      \t \t <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
        <td>hgdfgdgfd</td> 
 
      
 
      </tr> 
 
    
 
    </tbody> 
 

 
</table> 
 
</div> 
 
</div>

來源

2016-12-01 10:26:45 sanjay

+0

兄弟這不是因爲使用兩個表標籤也使用了標籤我不想重新格式化我的HTML。 –

+0

@HarshalBhamare您無論如何不得不重新格式化它，因爲您使用的結構是不正確的，如果沒有使用兩個表，您可能可以通過使用Js來完成它，但這會增加您的代碼並減少頁面加載。 – sanjay

+0

我對js bro很滿意。 –

相關問題

 相關問題