При отображении данных фиксированный заголовок может иметь лучшую читаемость.
1. Метод реализации:
1. Определить 2 таблицы, одна абсолютная фиксированная
<div> <Таблица CellPadding = "0" cellPacing = "0" id = "table1"> <tr> <th> <div> serial number </div> </th> <Th> <div> Имя сохранения </div> </th> ... </tr> <tr> ... </tr> </table> </div> <div> <tablepadding = "0". </div>
2. Скопируйте таблицу 1 <TH> и вставьте таблицу 2
var th_new = $ ("#table1 tr"). eq (0) .clone (); $ ("#фиксированный таблица1"). Append (th_new);3. MELOD RESIZE (), чтобы получить ширину <TH> каждого столбца в таблице 1 в реальном времени
function trresize () {$ ("#фиксированный таблица1 th"). Каждый (function () {var num = $ (this) .index (); var th_width = $ ("#table1 th"). eq (num) .width (); $ (this) .css ("width", th_width+"px");}); }4. Страница слишком мала, таблица прокручивается с прокруткой заголовка таблицы
$ (". Table1-wapper"). scroll (function () {var scroll =-$ (this) .scrollleft () $ (". Fixed-table1-wapper"). CSS ("слева", scroll+"px");});2. Обратите внимание на детали:
1. Адаптивная ширина, удалите пробелы в клетках:
<таблица cellPadding = "0" cellPacing = "0"> </table>
2. Строка таблицы:
Если вы напрямую добавите границу <TD>, края будут перекрываться; Добавить атрибуты: пограничный коллапс: коллапс;
3. ширина TD:
Просто контролируйте ширину первой строки <TD> </td>/<td> </td>
4. Различные цвета странных и даже рядов:
CSS: #table1 Tr: nth-child (2n) {founal-color: #ccc;} IE7 Проблема совместимости
jquery: $ ("#table1 tr: даже"). css ("фоновый цвет", "#ccc");
Ниже приведен полный код:
<! Doctype html> <html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <teent> Организация таблицы </title> <link rel = "stylesship" type = "text/css" href = "css/basic.css"> <cript = "jriptscript =" jriptscript = "jriptscript =" jriptscript = "jref =" css/basic.cssprice = "jref =" css/basic.cavscript '> <cript = "jref =" css/basic. src = "js/jquery-1.8.3.min.js"> </script> <style type = "text/css"> html {overflow: auto;} .table-wapper {width: 100%; маржа: 30px auto; font-size: 16px; позиция: относительно; .table1-wapper {высота: 200px; overflow-y: auto;} .table-wapper table {border: 1px solid #f00; линейная-высота: 2; граница-коллапс: коллапс; белое пространство: nowrap;} .table-wapper th {font-size: 18px; font-weight: нормальный; TD {Text-Align: Center; Gorder: 1px Solid#f00;} .fixed-table1-wapper {position: Absolute; top: 0px; слева: 0px; фоновый цвет: #dbdbdb;}/*#table1 tr: nth-child (2n) {dives> <bode> <bode> <bode> <bod> <bode> <bod> <bod> <bod> <bod> <bod> <bod> <bod> <bod> <bod> <bod> <bod> <bod> <bod> <bode> <bod> cellPadding = "0" cellPacing = "0" id = "table1"> <Tr> <th> серийный номер </th> <Th> Stock name </th> <Th> код запаса </th> <Th> транзакция </th> <Th> наводнение </th> <Th> наводнение </th> <Th> Turbilting </th> thrbs </th> </th> </th> </th> </th> thbs </th> </th> </th> </th> </th> </th> thrbs </th> </th> </th> <th>Turbs</th> <th>Turbs</th> <th>Turbs</th> <th>Turbs</th> <th>Turbs</th> <th>Turbs</th> <th>Turbs</th> <th>Turbs</th> <th>Turbs</th> <th>Turbs</th> <th>Turbs</th> <th>Turbs</th> <th>Turbs</th> <Th> отраслевой сектор </th> </tr> <tr> <td> 1 </td> <td> Bright Dairy </td> <td> 600597 </td> <td> 15,2 </td> <td> +6,23%</td> <Td> 0,12%</td> <Td> еда и Begust </td> <Td> 0,12%</td> <Td> <Td> </td> </td> <dd> </td> <dd> </td> </td> <dd> </td> <dd> </td> </td> <dd> </td> </td> <dd> </td> </td> <dd> </td> <TD> 2 </TD> <TD> Bright Dairy </td> <Td> 600597 </TD> <TD> 15,2 </TD> <TD> +6,23%</td> <TD> 0,12%</TD> <TD> пищевая пища и пищу </TD> </TR> <TR> <TD> 3 <TD> 3 <TD> <TD> <TD> <TD> 3 <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> <TD> 3 <TD> <TD> 3 <TD> <TD> <TD> <TD> 3 <TD> <TD> <TD> <TD> <TD> 3 <TD> 3 <TD> <TD> <TD> <TD> 3 <TD> <TD> 3 <TD> 3 <TD> <TD> 3 <TD> 3 <TD> <TD>. Dairy </td> <td> 600597 </td> <td> 15,2 </td> <td> +6,23%</td> <td> 0,12%</td> <td> пища и писа <TD> 600597 </TD> <TD> 15,2 </TD> <TD> +6,23%</TD> <TD> 0,12%</TD> <TD> пища и напиток </TD> </TR> <TR> <TD> 4 </TD> <TD> Bright Dairy </TD> <TD> 6005771 </TD> </td> 6005971 </TD> <TD> 600577 </TD> <TD> 600571 </TD> <TD> 600597 </TD> </TD> <TD> 600597 </TD> <TD> 15,2 </TD> <TD> +6,23%</TD> <TD> 0,12%</TD> <TD> пища и напиток </td> </tr> <tr> <TD> 5 </TD> <TD> Bright Dairy </TD> <TD> 600597 <TD> <TD> 15.21 </TD> <TD> 600597 <TD> <TD> +6,23%</td> <td> 0,12%</td> <td> пища и напиток </td> </tr> <tr> <td> 6 </td> <td> Яркий Dairy </td> <td> 600597 </td> <td> 15.2 </td> <td> +6.23%. <TD> 0,12%</TD> <TD> пища и напиток </td> </tr> <tr> <td> 7 </td> <td> Bright Dairy </td> <td> 600597 </td> <td> 15,2 </td> <td> +6,23%</td> <td> 0.12 </td> <td> +6,23%</td> <td> 0,12%</td> <td> 0,12%</td> <Td> 0,12%</TD> <TD> <TD> 0,12 </td> <TD> +6,23%</TD> <TD> 0, Напиток </td> </tr> <tr> <td> 8 </td> <td> Bright Dairy </td> <td> 600597 </td> <td> 15,2 </td> <td> +6.23%</td> <td> 0,12%</td> <td> Food and Begrage </td> <td> 0,12%</td> <td> food и begrage </td> <td> </td> </td> <dr> </td> </td> </td> </td> <td> <td> <td> <td> <td> <td> <td> 0,12%</td> <td> <td> <td> <td> <dd> </td> <td> 0,12%</td> <td>. <TD> 9 </TD> <TD> Bright Dairy </td> <td> 600597 </td> <td> 15.2 </td> <td> +6,23%</td> <td> 0,12%</td> <Td> пищевая пища и питание </td> </tr> <Tr> <td> 10 <Td> 10 <Td> 10 <Td> 10 <Td> 10 <Td> 10 <Td> 10 <Td> 10 <Td> 10 <Td> 10 <Td> 10 <Td> 10 <Td> 10 <Td> 10 <Td>. Dairy </td> <td> 600597 </td> <td> 15,2 </td> <td> +6,23%</td> <td> 0,12%</td> <td> пищевая пища и пищи </td> </tr> </table> </div> <div> <tablepadding = "0". </table> </div> </div> <script type = "text/javascript"> $ (function () {<br> $ ("#table1 tr: даже"). css ("фоновый цвет", "#ccc"); // color color line var var var inner_width = $ ("#table1").). $ (.. Фиксированная таблица1-WAPPER »). $ (". Table1-wapper"). scroll (function () {var scroll =-$ (this) .scrollleft () $ (". Fixed-table1-wapper"). CSS ("слева", scroll+"px");}); function trresize () {var inner_width = $ ("#table1"). overwidth (); $ (". Фиксированный таблица1-WAPPER"). CSS ("ширина", inner_width+"px"); $ ("#Fixed-Table1 th"). Каждый (function () {var num = $ (this) .index (); var th_width = $ ("#table1 th"). eq (num) .width (); //console.log("th_width:"+th_width); } </script> </body> </html>Простая реализация фиксированного заголовка вышеуказанной адаптивной формы - это весь контент, которым я делюсь с вами. Я надеюсь, что вы можете дать вам ссылку, и я надеюсь, что вы сможете поддержать Wulin.com больше.