html表的垂直滚动

时间:2015-10-19 02:25:49

标签: html html-table

我找到了一个带有固定标题的垂直滚动条的css代码而没有使用任何jquery或javasript,但我面临的问题是,当我亲自编写代码时,结果不同但是当我复制粘贴它时,最终结果是与网站上描述的相同。你能帮助我在哪里弄错了。这是我写的代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
  * { padding: 0; margin: 0 ; }
table.cruises{
font-family:verdana,arial,helvetica,sans-serif;
font-size:11px;
cellspacing:0;
border-collapse:collapse;
width:535px;
}
table.cruises th,table.cruises td{
border-right:1px solid #999;
border-bottom:1px solid #999;
}
table.cruises th{ background:#aab;}
table.cruises td{ background:#eee;}

div.scrollableContainer{
position:relative;
width:552px;
padding-top:1.7em;
margin:40px;
border:1px solid #999;
background:#aab;
}
div.scrollingArea{
height:240px;
overflow:auto;
}

table.scrollable thead tr{
left: 0; top:0;
position:absolute;
}

table.cruises .name     { width: 108px; }
table.cruises .operator { width: 126px; }
table.cruises .began    { width: 76px; text-align:center; }
table.cruises .tonnage  { width: 60px; text-align:center; }
table.cruises .status   { width: 160px; }
</style>
</head>
<body>

<div class="scrollableContainer">
  <div class="scrollingArea">
  	<table class="cruises scrollable">
  	  <thead>
  			<tr>
  	      <th class="name">Name</th>
  	      <th class="opearator">Operator</th>
  	      <th class="began">Began Operation</th>
  	      <th class="tonnage">Tonnage</th>
  	      <th class="status">Status</th>
  			</tr>
  		</thead>
  		<tbody>
  		  		    		  <tr>
          <td class="name">Seabourne Sun</td>
          <td class="operator">Seabourne Cruise Line</td>
          <td class="began">1998</td>
          <td class="tonnage"></td>
          <td class="status">Ended service in 2002, currently operating as Prinsendam</td>
        </tr>
            		    		  <tr>
          <td class="name">Adventures of the Seas</td>
          <td class="operator">Royal Caribbean International</td>
          <td class="began">2001</td>
          <td class="tonnage">138,000</td>
          <td class="status">Operating</td>
        </tr>
            		    		  <tr>
          <td class="name">Oceanic Independence</td>
          <td class="operator">American Hawaiian Cruises / American Global Line</td>
          <td class="began">1974</td>
          <td class="tonnage">23,719</td>
          <td class="status">Named formerly (1951-1974) and subsequently renamed (1982-2006) the Independence, renamed the Oceanic (2006), sold for scrap in 2008
but remains in mothballs</td>
        </tr>
            		    		  <tr>
          <td class="name">Cunard Ambassador</td>
          <td class="operator">Cunard Line</td>
          <td class="began">1972</td>
          <td class="tonnage">14,160</td>
          <td class="status">Burnt 1974, rebuilt into a livestock carrier,renamed Linda Clausen, later Procyon, Raslan. Scrapped 1984 after a second fire.</td>
        </tr>
            		    		  <tr>
          <td class="name">Aegean Beauty</td>
          <td class="operator">Voyages to Antiquity</td>
          <td class="began">1973</td>
          <td class="tonnage">11,563</td>
          <td class="status">Formerly Aegean Dolphin and Aegean I. Operating</td>
        </tr>
            		    		  <tr>
          <td class="name">Seranade of the Seas</td>
          <td class="operator">Royal Caribbean International</td>
          <td class="began">2003</td>
          <td class="tonnage">90,090</td>
          <td class="status">Operating</td>
        </tr>
            		    		  <tr>
          <td class="name">Queen Elizabeth</td>
          <td class="operator">Cunard Line</td>
          <td class="began">1969</td>
          <td class="tonnage">70,327</td>
          <td class="status">Left fleet in November 2008</td>
        </tr>
            		    		  <tr>
          <td class="name">Queen Elizabeth</td>
          <td class="operator">Cunard Line</td>
          <td class="began">2010</td>
          <td class="tonnage">92,000</td>
          <td class="status">Operating</td>
        </tr>
            		    		  <tr>
          <td class="name">Regent Sea</td>
          <td class="operator">Regency Cruises</td>
          <td class="began">1957</td>
          <td class="tonnage"></td>
          <td class="status">Began operation in 1957 as the Gripsholm (II) for Swedish America Line. Ended operation when Regency wen bankrupt in 1995. Was to be
converted to a cassino ship, but later marked for scrap. Prior to scrapping, was looted by pirates, then sank in heavy seas in 2001.</td>
        </tr>
            		    		  <tr>
          <td class="name">Allure of the Seas</td>
          <td class="operator">Royal Caribbean International</td>
          <td class="began">2010</td>
          <td class="tonnage">225,000</td>
          <td class="status">Starts service in December 2010</td>
        </tr>
            		    		  <tr>
          <td class="name">Amadea</td>
          <td class="operator">Phoenix Reisen</td>
          <td class="began">2006</td>
          <td class="tonnage">28,717</td>
          <td class="status">Operating. Ex-Asuka</td>
        </tr>
            		    		  <tr>
          <td class="name">Amant</td>
          <td class="operator">Phoenix Voyages (Vietnam)</td>
          <td class="began">2010</td>
          <td class="tonnage"></td>
          <td class="status">Built in 2010 by a local Vietnamese shipyard (Vuotsong), L'Amant operates on the Mekong River in Vietnam, and is without any doubt
the most well constructed vessel sailing in Vietnam</td>
        </tr>
            		    		  <tr>
          <td class="name">Oasis of the Seas</td>
          <td class="operator">Royal Caribbean Cruise Line</td>
          <td class="began">2009</td>
          <td class="tonnage">225,282</td>
          <td class="status">Operating</td>
        </tr>
            		    		  <tr>
          <td class="name">Andes</td>
          <td class="operator">Royal Mail Lines</td>
          <td class="began">1959</td>
          <td class="tonnage">27,000</td>
          <td class="status">Was liner, became cruise ship in 1959</td>
        </tr>
            		    		  <tr>
          <td class="name">Anna Nery</td>
          <td class="operator">Companhia de Navegacao Costeirab</td>
          <td class="began">1962</td>
          <td class="tonnage"></td>
          <td class="status">Ended service in 1978. Currently operating as Salamis Glory</td>
        </tr>
            		    		  <tr>
          <td class="name">National Geographic Endeavour</td>
          <td class="operator">Lindblab Expeditions</td>
          <td class="began">1996</td>
          <td class="tonnage"></td>
          <td class="status">Operating, also known as Endeavour</td>
        </tr>
            		    		  <tr>
          <td class="name">Liberty of the Seas</td>
          <td class="operator">Royal Caribbean International</td>
          <td class="began">2007</td>
          <td class="tonnage">154,407</td>
          <td class="status">Operating</td>
        </tr>
            		    		  <tr>
          <td class="name">Norwegian Epic</td>
          <td class="operator">Norwegian Cruise Line</td>
          <td class="began">2010</td>
          <td class="tonnage">153,000</td>
          <td class="status">Operating</td>
        </tr>
            		    		  <tr>
          <td class="name">Independence of the Seas</td>
          <td class="operator">Royal Caribbean International</td>	
          <td class="began">2008</td>
          <td class="tonnage">154,407</td>
          <td class="status">Operating</td>
        </tr>
            		    		  <tr>
          <td class="name">Navigator of the Seas</td>
          <td class="operator">Royal Caribbean International</td>
          <td class="began">2002</td>
          <td class="tonnage">138,0000</td>
          <td class="status">Operating</td>
        </tr>
            		    		  <tr>
          <td class="name">Caribbean Princess</td>
          <td class="operator">Princess Cruises</td>
          <td class="began">2004</td>
          <td class="tonnage">112,894</td>
          <td class="status">Operating</td>
        </tr>
                    </tbody>
  	</table>
	</div>
</div>
</body>
</html>

以下是来自网站的代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
  * { padding: 0; margin: 0; }
  table.cruises { 
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 11px;
    cellspacing: 0; 
    border-collapse: collapse; 
    width: 535px;    
    }
  table.cruises th, table.cruises td { 
    border-right: 1px solid #999; 
    border-bottom: 1px solid #999; 
    }
  table.cruises th { background: #aab; }
  table.cruises td { background: #eee; }
  
  div.scrollableContainer { 
    position: relative; 
    width: 552px; 
    padding-top: 1.7em; 
    margin: 40px;    
    border: 1px solid #999;
    background: #aab;    
    }
  div.scrollingArea { 
    height: 240px; 
    overflow: auto; 
    }

  table.scrollable thead tr {
    left: 0; top: 0;
    position: absolute;
    }
    
  table.cruises .name     { width: 126px; }
  table.cruises .operator { width: 126px; }
  table.cruises .began    { width: 76px;  }
  table.cruises .tonnage  { width: 60px;  }
  table.cruises .status   { width: 142px; }

</style>
</head>
<body>

<div class="scrollableContainer">
  <div class="scrollingArea">
  	<table class="cruises scrollable">
  	  <thead>
  			<tr>
  	      <th class="name">Name</th>
  	      <th class="operator">Operator</th>
  	      <th class="began">Began operation</th>
  	      <th class="tonnage">Tonnage</th>
  	      <th class="status">Status</th>
  			</tr>
  		</thead>
  		<tbody>
  		  		    		  <tr>
          <td class="name">Seabourne Sun</td>
          <td class="operator">Seabourn Cruise Line</td>
          <td class="began">1988</td>
          <td class="tonnage"></td>
          <td class="status">Ended service in 2002, currently operating as Prinsendam</td>                        
        </tr>
                		    		  <tr>
          <td class="name">Adventures of the Seas</td>
          <td class="operator">Royal Caribbean International</td>
          <td class="began">2001</td>
          <td class="tonnage">138,000</td>
          <td class="status">Operating</td>                        
        </tr>
                		    		  <tr>
          <td class="name">Oceanic Independence</td>
          <td class="operator">American Hawaiian Cruises / American Global Line</td>
          <td class="began">1974</td>
          <td class="tonnage">23,719</td>
          <td class="status">Named formerly (1951-1974) and subsequently renamed (1982-2006) the Independence, renamed the Oceanic (2006), sold for scrap in 2008 but remains in mothballs</td>                        
        </tr>
                		    		  <tr>
          <td class="name">Cunard Ambassador</td>
          <td class="operator">Cunard Line</td>
          <td class="began">1972</td>
          <td class="tonnage">14,160</td>
          <td class="status">Burnt 1974, rebuilt into a livestock carrier, renamed Linda Clausen, later Procyon, Raslan. Scrapped 1984 after a second fire.</td>                        
        </tr>
                		    		  <tr>
          <td class="name">Aegean Beauty</td>
          <td class="operator">Voyages to Antiquity</td>
          <td class="began">1973</td>
          <td class="tonnage">11,563</td>
          <td class="status">Formerly Aegean Dolphin and Aegean I. Operating</td>                        
        </tr>
                		    		  <tr>
          <td class="name">Serenade of the Seas</td>
          <td class="operator">Royal Caribbean International</td>
          <td class="began">2003</td>
          <td class="tonnage">90,090</td>
          <td class="status">Operating</td>                        
        </tr>
                		    		  <tr>
          <td class="name">Queen Elizabeth 2</td>
          <td class="operator">Cunard Line</td>
          <td class="began">1969</td>
          <td class="tonnage">70,327</td>
          <td class="status">Left fleet in November 2008</td>                        
        </tr>
                		    		  <tr>
          <td class="name">Queen Elizabeth</td>
          <td class="operator">Cunard Line</td>
          <td class="began">2010</td>
          <td class="tonnage">92,000</td>
          <td class="status">Operating</td>                        
        </tr>
                		    		  <tr>
          <td class="name">Regent Sea</td>
          <td class="operator">Regency Cruises</td>
          <td class="began">1957</td>
          <td class="tonnage"></td>
          <td class="status">Began operation in 1957 as the Gripsholm (II) for Swedish America Line. Ended operation when Regency went bankrupt in 1995. Was to be converted to a casino ship, but later marked for scrap. Prior to scrapping, was looted by pirates, then sank in heavy seas in 2001.</td>                        
        </tr>
                		    		  <tr>
          <td class="name">Allure of the Seas</td>
          <td class="operator">Royal Caribbean International</td>
          <td class="began">2010</td>
          <td class="tonnage">225,000</td>
          <td class="status">Starts service in December 2010</td>                        
        </tr>
                		    		  <tr>
          <td class="name">Amadea</td>
          <td class="operator">Phoenix Reisen</td>
          <td class="began">2006</td>
          <td class="tonnage">28,717</td>
          <td class="status">Operating. Ex-Asuka</td>                        
        </tr>
                		    		  <tr>
          <td class="name">Amant</td>
          <td class="operator">PhoenixVoyages (Vietnam)</td>
          <td class="began">2010</td>
          <td class="tonnage"></td>
          <td class="status">Built in 2010 by a local Vietnamese shipyard (Vuotsong), L'Amant operates on the Mekong River in Vietnam, and is without any doubt the most well constructed vessel sailing in Vietnam.</td>                        
        </tr>
                		    		  <tr>
          <td class="name">Oasis of the Seas</td>
          <td class="operator">Royal Caribbean Cruise Line</td>
          <td class="began">2009</td>
          <td class="tonnage">225,282</td>
          <td class="status">Operating</td>                        
        </tr>
                		    		  <tr>
          <td class="name">Andes</td>
          <td class="operator">Royal Mail Lines</td>
          <td class="began">1959</td>
          <td class="tonnage">27,000</td>
          <td class="status">Was liner, became cruise ship in 1959.</td>                        
        </tr>
                		    		  <tr>
          <td class="name">Anna Nery</td>
          <td class="operator">Companhia de Navegacao Costeirab</td>
          <td class="began">1962</td>
          <td class="tonnage"></td>
          <td class="status">Ended service in 1978. Currently operating as Salamis Glory</td>                        
        </tr>
                		    		  <tr>
          <td class="name">National Geographic Endeavour</td>
          <td class="operator">Lindblad Expeditions</td>
          <td class="began">1996</td>
          <td class="tonnage"></td>
          <td class="status">Operating, also known as Endeavour</td>                        
        </tr>
                		    		  <tr>
          <td class="name">Liberty of the Seas</td>
          <td class="operator">Royal Caribbean International</td>
          <td class="began">2007</td>
          <td class="tonnage">154,407</td>
          <td class="status">Operating</td>                        
        </tr>
                		    		  <tr>
          <td class="name">Norwegian Epic</td>
          <td class="operator">Norwegian Cruise Line</td>
          <td class="began">2010</td>
          <td class="tonnage">153,000</td>
          <td class="status">Operating</td>                        
        </tr>
                		    		  <tr>
          <td class="name">Independence of the Seas</td>
          <td class="operator">Royal Caribbean International</td>
          <td class="began">2008</td>
          <td class="tonnage">154,407</td>
          <td class="status">Operating</td>                        
        </tr>
                		    		  <tr>
          <td class="name">Navigator of the Seas</td>
          <td class="operator">Royal Caribbean International</td>
          <td class="began">2002</td>
          <td class="tonnage">  138,000</td>
          <td class="status">Operating</td>                        
        </tr>
                		    		  <tr>
          <td class="name">Caribbean Princess</td>
          <td class="operator">Princess Cruises</td>
          <td class="began">2004</td>
          <td class="tonnage">112,894</td>
          <td class="status">Operating</td>                        
        </tr>
                    </tbody>
  	</table>
	</div>
</div>
</body>
</html>

任何帮助都将不胜感激。

1 个答案:

答案 0 :(得分:1)

这只是一个拼写错误。

你有这个:

<th class="opearator">Operator</th>

而不是:

<th class="operator">Operator</th>

注意第二个与你的(操作者)

的操作符拼写

如果这样可以解决您的问题,请点击左侧的检查将其标记为正确。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
  * { padding: 0; margin: 0 ; }
table.cruises{
font-family:verdana,arial,helvetica,sans-serif;
font-size:11px;
cellspacing:0;
border-collapse:collapse;
width:535px;
}
table.cruises th,table.cruises td{
border-right:1px solid #999;
border-bottom:1px solid #999;
}
table.cruises th{ background:#aab;}
table.cruises td{ background:#eee;}

div.scrollableContainer{
position:relative;
width:552px;
padding-top:1.7em;
margin:40px;
border:1px solid #999;
background:#aab;
}
div.scrollingArea{
height:240px;
overflow:auto;
}

table.scrollable thead tr{
left: 0; top:0;
position:absolute;
}

table.cruises .name     { width: 108px; }
table.cruises .operator { width: 126px; }
table.cruises .began    { width: 76px; text-align:center; }
table.cruises .tonnage  { width: 60px; text-align:center; }
table.cruises .status   { width: 160px; }
</style>
</head>
<body>

<div class="scrollableContainer">
  <div class="scrollingArea">
  	<table class="cruises scrollable">
  	  <thead>
  			<tr>
  	      <th class="name">Name</th>
  	      <th class="operator">Operator</th>
  	      <th class="began">Began Operation</th>
  	      <th class="tonnage">Tonnage</th>
  	      <th class="status">Status</th>
  			</tr>
  		</thead>
  		<tbody>
  		  		    		  <tr>
          <td class="name">Seabourne Sun</td>
          <td class="operator">Seabourne Cruise Line</td>
          <td class="began">1998</td>
          <td class="tonnage"></td>
          <td class="status">Ended service in 2002, currently operating as Prinsendam</td>
        </tr>
            		    		  <tr>
          <td class="name">Adventures of the Seas</td>
          <td class="operator">Royal Caribbean International</td>
          <td class="began">2001</td>
          <td class="tonnage">138,000</td>
          <td class="status">Operating</td>
        </tr>
            		    		  <tr>
          <td class="name">Oceanic Independence</td>
          <td class="operator">American Hawaiian Cruises / American Global Line</td>
          <td class="began">1974</td>
          <td class="tonnage">23,719</td>
          <td class="status">Named formerly (1951-1974) and subsequently renamed (1982-2006) the Independence, renamed the Oceanic (2006), sold for scrap in 2008
but remains in mothballs</td>
        </tr>
            		    		  <tr>
          <td class="name">Cunard Ambassador</td>
          <td class="operator">Cunard Line</td>
          <td class="began">1972</td>
          <td class="tonnage">14,160</td>
          <td class="status">Burnt 1974, rebuilt into a livestock carrier,renamed Linda Clausen, later Procyon, Raslan. Scrapped 1984 after a second fire.</td>
        </tr>
            		    		  <tr>
          <td class="name">Aegean Beauty</td>
          <td class="operator">Voyages to Antiquity</td>
          <td class="began">1973</td>
          <td class="tonnage">11,563</td>
          <td class="status">Formerly Aegean Dolphin and Aegean I. Operating</td>
        </tr>
            		    		  <tr>
          <td class="name">Seranade of the Seas</td>
          <td class="operator">Royal Caribbean International</td>
          <td class="began">2003</td>
          <td class="tonnage">90,090</td>
          <td class="status">Operating</td>
        </tr>
            		    		  <tr>
          <td class="name">Queen Elizabeth</td>
          <td class="operator">Cunard Line</td>
          <td class="began">1969</td>
          <td class="tonnage">70,327</td>
          <td class="status">Left fleet in November 2008</td>
        </tr>
            		    		  <tr>
          <td class="name">Queen Elizabeth</td>
          <td class="operator">Cunard Line</td>
          <td class="began">2010</td>
          <td class="tonnage">92,000</td>
          <td class="status">Operating</td>
        </tr>
            		    		  <tr>
          <td class="name">Regent Sea</td>
          <td class="operator">Regency Cruises</td>
          <td class="began">1957</td>
          <td class="tonnage"></td>
          <td class="status">Began operation in 1957 as the Gripsholm (II) for Swedish America Line. Ended operation when Regency wen bankrupt in 1995. Was to be
converted to a cassino ship, but later marked for scrap. Prior to scrapping, was looted by pirates, then sank in heavy seas in 2001.</td>
        </tr>
            		    		  <tr>
          <td class="name">Allure of the Seas</td>
          <td class="operator">Royal Caribbean International</td>
          <td class="began">2010</td>
          <td class="tonnage">225,000</td>
          <td class="status">Starts service in December 2010</td>
        </tr>
            		    		  <tr>
          <td class="name">Amadea</td>
          <td class="operator">Phoenix Reisen</td>
          <td class="began">2006</td>
          <td class="tonnage">28,717</td>
          <td class="status">Operating. Ex-Asuka</td>
        </tr>
            		    		  <tr>
          <td class="name">Amant</td>
          <td class="operator">Phoenix Voyages (Vietnam)</td>
          <td class="began">2010</td>
          <td class="tonnage"></td>
          <td class="status">Built in 2010 by a local Vietnamese shipyard (Vuotsong), L'Amant operates on the Mekong River in Vietnam, and is without any doubt
the most well constructed vessel sailing in Vietnam</td>
        </tr>
            		    		  <tr>
          <td class="name">Oasis of the Seas</td>
          <td class="operator">Royal Caribbean Cruise Line</td>
          <td class="began">2009</td>
          <td class="tonnage">225,282</td>
          <td class="status">Operating</td>
        </tr>
            		    		  <tr>
          <td class="name">Andes</td>
          <td class="operator">Royal Mail Lines</td>
          <td class="began">1959</td>
          <td class="tonnage">27,000</td>
          <td class="status">Was liner, became cruise ship in 1959</td>
        </tr>
            		    		  <tr>
          <td class="name">Anna Nery</td>
          <td class="operator">Companhia de Navegacao Costeirab</td>
          <td class="began">1962</td>
          <td class="tonnage"></td>
          <td class="status">Ended service in 1978. Currently operating as Salamis Glory</td>
        </tr>
            		    		  <tr>
          <td class="name">National Geographic Endeavour</td>
          <td class="operator">Lindblab Expeditions</td>
          <td class="began">1996</td>
          <td class="tonnage"></td>
          <td class="status">Operating, also known as Endeavour</td>
        </tr>
            		    		  <tr>
          <td class="name">Liberty of the Seas</td>
          <td class="operator">Royal Caribbean International</td>
          <td class="began">2007</td>
          <td class="tonnage">154,407</td>
          <td class="status">Operating</td>
        </tr>
            		    		  <tr>
          <td class="name">Norwegian Epic</td>
          <td class="operator">Norwegian Cruise Line</td>
          <td class="began">2010</td>
          <td class="tonnage">153,000</td>
          <td class="status">Operating</td>
        </tr>
            		    		  <tr>
          <td class="name">Independence of the Seas</td>
          <td class="operator">Royal Caribbean International</td>	
          <td class="began">2008</td>
          <td class="tonnage">154,407</td>
          <td class="status">Operating</td>
        </tr>
            		    		  <tr>
          <td class="name">Navigator of the Seas</td>
          <td class="operator">Royal Caribbean International</td>
          <td class="began">2002</td>
          <td class="tonnage">138,0000</td>
          <td class="status">Operating</td>
        </tr>
            		    		  <tr>
          <td class="name">Caribbean Princess</td>
          <td class="operator">Princess Cruises</td>
          <td class="began">2004</td>
          <td class="tonnage">112,894</td>
          <td class="status">Operating</td>
        </tr>
                    </tbody>
  	</table>
	</div>
</div>
</body>
</html>