html - Fixed Table Header -
this question has answer here:
- html table fixed headers? 22 answers
i know how make fixed table-header few different ways, i'm looking best way, , want use <table>,<thead>,<tbody>,<tr>,<th>,<td> tags html spec provides you.
here dummy table structure:
<table> <thead> <tr> <th>id</th> <th>name</th> <th>field</th> <th>facility</th> <th>change</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>name1</td> <td>field1</td> <td>facility1</td> <td>change1</td> </tr> <tr> <td>2</td> <td>name2</td> <td>field2</td> <td>facility2</td> <td>change2</td> </tr> <tr> <td>3</td> <td>name3</td> <td>field3</td> <td>facility3</td> <td>change3</td> </tr> <tr> <td>4</td> <td>name4</td> <td>field4</td> <td>facility4</td> <td>change4</td> </tr> <tr> <td>5</td> <td>name5</td> <td>field5</td> <td>facility5</td> <td>change5</td> </tr> <tr> <td>6</td> <td>name6</td> <td>field6</td> <td>facility6</td> <td>change6</td> </tr> <tr> <td>7</td> <td>name7</td> <td>field7</td> <td>facility7</td> <td>change7</td> </tr> <tr> <td>8</td> <td>name8</td> <td>field8</td> <td>facility8</td> <td>change8</td> </tr> <tr> <td>9</td> <td>name9</td> <td>field9</td> <td>facility9</td> <td>change9</td> </tr> <tr> <td>10</td> <td>name10</td> <td>field10</td> <td>facility10</td> <td>change10</td> </tr> <tr> <td>11</td> <td>name11</td> <td>field11</td> <td>facility11</td> <td>change11</td> </tr> <tr> <td>12</td> <td>name12</td> <td>field12</td> <td>facility12</td> <td>change12</td> </tr> <tr> <td>13</td> <td>name13</td> <td>field13</td> <td>facility13</td> <td>change13</td> </tr> <tr> <td>14</td> <td>name14</td> <td>field14</td> <td>facility14</td> <td>change14</td> </tr> <tr> <td>15</td> <td>name15</td> <td>field15</td> <td>facility15</td> <td>change15</td> </tr> </tbody> </table>
try working demo. below code:
table { display: flex; flex-flow: column; height: 100%; width: 100%; border-collapse: separate; border-spacing: 0 1px; } table thead { flex: 0 0 auto; width: calc(100% - 0.9em); } table tbody { flex: 1 1 auto; display: block; overflow-y: scroll; } table tbody tr { width: 100%; } table thead, table tbody tr { display: table; table-layout: fixed; } tbody td, thead th { border-right: 1px solid transparent; vertical-align: middle; } thead th { height: 35px; font-size: 16px; text-align: left; text-transform: uppercase; } tbody td { text-align: left; height: 30px; background: #d5d5d5; } .table-cont { width: 100%; height: 350px; }<div class="table-cont"> <table> <thead> <tr> <th>id</th> <th>name</th> <th>field</th> <th>facility</th> <th>change</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>name1</td> <td>field1</td> <td>facility1</td> <td>change1</td> </tr> <tr> <td>2</td> <td>name2</td> <td>field2</td> <td>facility2</td> <td>change2</td> </tr> <tr> <td>3</td> <td>name3</td> <td>field3</td> <td>facility3</td> <td>change3</td> </tr> <tr> <td>4</td> <td>name4</td> <td>field4</td> <td>facility4</td> <td>change4</td> </tr> <tr> <td>5</td> <td>name5</td> <td>field5</td> <td>facility5</td> <td>change5</td> </tr> <tr> <td>6</td> <td>name6</td> <td>field6</td> <td>facility6</td> <td>change6</td> </tr> <tr> <td>7</td> <td>name7</td> <td>field7</td> <td>facility7</td> <td>change7</td> </tr> <tr> <td>8</td> <td>name8</td> <td>field8</td> <td>facility8</td> <td>change8</td> </tr> <tr> <td>9</td> <td>name9</td> <td>field9</td> <td>facility9</td> <td>change9</td> </tr> <tr> <td>10</td> <td>name10</td> <td>field10</td> <td>facility10</td> <td>change10</td> </tr> <tr> <td>11</td> <td>name11</td> <td>field11</td> <td>facility11</td> <td>change11</td> </tr> <tr> <td>12</td> <td>name12</td> <td>field12</td> <td>facility12</td> <td>change12</td> </tr> <tr> <td>13</td> <td>name13</td> <td>field13</td> <td>facility13</td> <td>change13</td> </tr> <tr> <td>14</td> <td>name14</td> <td>field14</td> <td>facility14</td> <td>change14</td> </tr> <tr> <td>15</td> <td>name15</td> <td>field15</td> <td>facility15</td> <td>change15</td> </tr> </tbody> </table> </div>
Comments
Post a Comment