Fixing table headers

Question

There is a table (example):

<table border="0" cellspacing="0" cellpadding="0" width="100%"> <tr style="position:fixed;"> <td>Имя</td> <td>Фамилия</td> </tr> <tr> <td>Иван 1</td> <td>иванов 1</td> </tr> <tr> <td>Иван 1</td> <td>иванов 1</td> </tr> <tr> <td>Иван 1</td> <td>иванов 1</td> </tr> <tr> <td>Иван 1</td> <td>иванов 1</td> </tr> <tr> <td>Иван 1</td> <td>иванов 1</td> </tr> </table>

The cap loses its width relative to subsequent lines. How can I do this so that the width does not change?

If you are given an exhaustive answer, mark it as correct (a daw opposite the selected answer).

HamSter HamSter 18k five 33 83 · Answer 1 · 2016-09-17T18:06:40

It is possible to fix only a block element (it does not act on table as it would be desirable). position: fixed; means that the block is positioned relative to the screen.

You can try something like this if you really need:

 <table border="0" cellspacing="0" cellpadding="0" width="100%" style="padding-top:1rem;"> <tr style="position:fixed; top: 0; width:100%;"> <td style="display: inline-block; width: 49%;">Имя</td> <td style="display: inline-block; width: 49%;">Фамилия</td> </tr> <tr> <td>Иван 1</td> <td>иванов 1</td> </tr> <tr> <td>Иван 1</td> <td>иванов 1</td> </tr> <tr> <td>Иван 1</td> <td>иванов 1</td> </tr> <tr> <td>Иван 1</td> <td>иванов 1</td> </tr> <tr> <td>Иван 1</td> <td>иванов 1</td> </tr> </table>

Sergey Omelchenko Sergey Omelchenko 376 one 7 · Answer 2 · 2016-09-17T18:10:09

Working option:

 <section class=""> <div class="container"> <table> <thead> <tr class="header"> <th> <div>Имя</div> </th> <th> <div>Фамилия</div> </th> </tr> </thead> <tbody> <tr> <td>Иван 1</td> <td>иванов 1</td> </tr> <tr> <td>Иван 1</td> <td>иванов 1</td> </tr> <tr> <td>Иван 1</td> <td>иванов 1</td> </tr> <tr> <td>Иван 1</td> <td>иванов 1</td> </tr> <tr> <td>Иван 1</td> <td>иванов 1</td> </tr> <tr> <td>Иван 1</td> <td>иванов 1</td> </tr> <tr> <td>Иван 1</td> <td>иванов 1</td> </tr> <tr> <td>Иван 1</td> <td>иванов 1</td> </tr> </tbody> </table> </div> </section>

and

 html, body{ margin:0; padding:0; height:100%; } section { position: relative; border: 1px solid #000; padding-top: 37px; background: #500; } .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; }

Example https://jsfiddle.net/h0qp3efw/

Sergey Sergey one · Answer 3 · 2017-04-01T17:07:47

 html, body{ margin:0; padding:0; } section { position: relative; border: 1px solid #000; padding-top: 37px; background: #555; width:90%; } .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 #888; }

 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Шапка таблицы</title> <meta name="description" content="Test"> <meta name="Robots" content="NOINDEX, NOFOLLOW"> <link rel="stylesheet" href="i.css" type="text/css"> </head> <body> <h2>Шапка таблицы</h2> <section class=""> <div class="container"> <table> <thead> <tr class="header"> <th><div>Имя</div></th><th><div>Фамилия</div></th><th><div>Отчество 1</div></th><th><div>Отч09876</div></th><th><div>Отч56789</div></th><th><div>Отч2345</div></th><th><div>Отч 3</div></th><th><div>Отчество 4</div></th> </tr> </thead> <tbody> <tr> <td>Иван 1</td> <td>иванов 1</td> <td>иванов 1</td> <td>3</td> <td>2</td> <td>1</td> <td>иванов 1</td> <td>иванов 1</td> </tr> <tr> <td>Иван 1</td> <td>иванов 1</td> <td>иванов 1</td> <td>3</td> <td>2</td> <td>1</td> <td>иванов 1</td> <td>иванов иванов иванов иванов</td> </tr> <tr> <td>Иван 1</td> <td>иванов 1</td> <td>иванов 1</td> <td>3</td> <td>2</td> <td>1</td> <td>иванов 1</td> <td>иванов иванов иванов иванов</td> </tr> <tr> <td>Иван 1</td> <td>иванов 1</td> <td>иванов 1</td> <td>3</td> <td>2</td> <td>1</td> <td>иванов 1</td> <td>иванов иванов иванов иванов</td> </tr> <tr> <td>Иван 1</td> <td>иванов 1</td> <td>иванов 1</td> <td>3</td> <td>2</td> <td>1</td> <td>иванов 1</td> <td>иванов иванов иванов иванов</td> </tr> <tr> <td>Иван 1</td> <td>иванов 1</td> <td>иванов 1</td> <td>3</td> <td>2</td> <td>1</td> <td>иванов 1</td> <td>иванов иванов иванов иванов</td> </tr> <tr> <td>Иван 1</td> <td>иванов 1</td> <td>иванов 1</td> <td>3</td> <td>2</td> <td>1</td> <td>иванов 1</td> <td>иванов иванов иванов иванов</td> </tr> <tr> <td>Иван 1</td> <td>иванов 1</td> <td>иванов 1</td> <td>3</td> <td>2</td> <td>1</td> <td>иванов 1</td> <td>иванов иванов иванов иванов</td> </tr> <tr> <td>Иван 1</td> <td>иванов 1</td> <td>иванов 1</td> <td>3</td> <td>2</td> <td>1</td> <td>иванов 1</td> <td>иванов иванов иванов иванов</td> </tr> <tr> <td>Иван 1</td> <td>иванов 1</td> <td>иванов 1</td> <td>3</td> <td>2</td> <td>1</td> <td>иванов 1</td> <td>иванов иванов иванов иванов</td> </tr> <tr> <td>Иван 1</td> <td>иванов 1</td> <td>иванов 1</td> <td>2</td> <td>3</td> <td>1</td> <td>иванов 1</td> <td>иванов иванов иванов иванов</td> </tr> </tbody> </table> </div> </section> </body> </html>

On the real table, the "cap" breaks

Fixing table headers

3 answers 3

More articles: