0
Я нашел код CSS для вертикальной полосы прокрутки с фиксированным заголовком без использования jquery или javasript, но проблема, с которой я столкнулась, заключается в том, что когда я лично пишу код, результат отличается, но когда я копирую пасту это конечный результат был таким же, как описать с веб-сайта. Можете ли вы мне помочь, где я ошибаюсь. Вот код, который я написал:Вертикальная прокрутка для таблицы 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: 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">
\t <table class="cruises scrollable">
\t <thead>
\t \t \t <tr>
\t <th class="name">Name</th>
\t <th class="opearator">Operator</th>
\t <th class="began">Began Operation</th>
\t <th class="tonnage">Tonnage</th>
\t <th class="status">Status</th>
\t \t \t </tr>
\t \t </thead>
\t \t <tbody>
\t \t \t \t \t \t <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>
\t \t \t \t <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>
\t \t \t \t <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>
\t \t \t \t <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>
\t \t \t \t <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>
\t \t \t \t <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>
\t \t \t \t <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>
\t \t \t \t <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>
\t \t \t \t <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>
\t \t \t \t <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>
\t \t \t \t <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>
\t \t \t \t <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>
\t \t \t \t <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>
\t \t \t \t <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>
\t \t \t \t <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>
\t \t \t \t <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>
\t \t \t \t <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>
\t \t \t \t <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>
\t \t \t \t <tr>
<td class="name">Independence of the Seas</td>
<td class="operator">Royal Caribbean International</td> \t
<td class="began">2008</td>
<td class="tonnage">154,407</td>
<td class="status">Operating</td>
</tr>
\t \t \t \t <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>
\t \t \t \t <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>
\t </table>
\t </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">
\t <table class="cruises scrollable">
\t <thead>
\t \t \t <tr>
\t <th class="name">Name</th>
\t <th class="operator">Operator</th>
\t <th class="began">Began operation</th>
\t <th class="tonnage">Tonnage</th>
\t <th class="status">Status</th>
\t \t \t </tr>
\t \t </thead>
\t \t <tbody>
\t \t \t \t \t \t <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>
\t \t \t \t <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>
\t \t \t \t <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>
\t \t \t \t <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>
\t \t \t \t <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>
\t \t \t \t <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>
\t \t \t \t <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>
\t \t \t \t <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>
\t \t \t \t <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>
\t \t \t \t <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>
\t \t \t \t <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>
\t \t \t \t <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>
\t \t \t \t <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>
\t \t \t \t <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>
\t \t \t \t <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>
\t \t \t \t <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>
\t \t \t \t <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>
\t \t \t \t <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>
\t \t \t \t <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>
\t \t \t \t <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>
\t \t \t \t <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>
\t </table>
\t </div>
</div>
</body>
</html>Любая помощь будет оценена ,
здесь оба выглядят одинаково, функционируют так же –
Да они все равно, но я не знаю, почему конечный результат отличается, когда я просто следовал загруженный код с веб-сайта , –
Я вижу, что вы имеете в виду –