Jak zrobić stałą tabelę nagłówkową wewnątrz przewijalnego div?

Question

Jak zrobić stałą tabelę nagłówkową wewnątrz przewijalnego div?

Chcę naprawić nagłówek mojej tabeli. Tabela jest obecna wewnątrz przewijalnego div. Poniżej znajduje się mój kod.

<div id="table-wrapper">
    <div id="table-scroll">
        <table bgcolor="white" border="0" cellpadding="0" cellspacing="0" id="header-fixed" width="100%" overflow="scroll" class="scrollTable">
            <thead>
                <tr>
                    <th>Order ID</th>
                    <th>Order Date</th>
                    <th>Status</th>
                    <th>Vol Number</th>
                    <th>Bonus Paid</th>
                    <th>Reason for no Bonus</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><%=snd.getOrderId()%></td>
                    <td><%=snd.getDateCaptured()%></td>
                    <td><%=snd.getOrderStatus()%></td>
                    <td>Data Not Available</td>
                    <td>Data Not Available</td>
                    <td>Data Not Available</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Poniżej znajduje się mój CSS, którego używam do powyższego div:

#table-wrapper {
    position:relative;
}

#table-scroll {
    height:250px;
    overflow:auto;  
    margin-top:20px;
}

#table-wrapper table {
    width:100%;
}

#table-wrapper table * {
    background:white;
    color:black;
}

#table-wrapper table thead th .text {
    position:absolute;   
    top:-20px;
    z-index:2;
    height:20px;
    width:35%;
    border:1px solid red;
}

19

html css css-position

Author: TylerH, 2013-07-24

Source

8 answers

Niektóre z tych odpowiedzi wydają się niepotrzebnie skomplikowane. Make your tbody:

display: block; height: 300px; overflow-y: auto

Następnie ręcznie ustaw szerokości każdej kolumny tak, aby kolumny thead i tbody były tej samej szerokości. Ustawienie style="table-layout: fixed" może być również konieczne.

4

Author: Dwayne,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-02-03 15:36:04

Myślę, że potrzebujesz czegoś takiego ?

W ten sposób http://s13.postimage.org/rv6jqaxvr/tabel_fixed_header.jpg

.....
<style>
.table{width: 500px;height: 200px;border-collapse:collapse;}
.table-wrap{max-height: 200px;width:100%;overflow-y:auto;overflow-x:hidden;}
.table-dalam{height:300px;width:500px;border-collapse:collapse;}
.td-nya{border-left:1px solid white;border-right:1px solid grey;border-bottom:1px solid    grey;}

</style>

<table class="table">
<thead>
    <tr>
    <th>Judul1</th>
    <th>Judul2</th>
    <th>Judul3</th>
    <th>Judul4</th>
   </tr>
 </thead>
 <tbody>
   <tr>
      <td colspan="4">
      <div class="table-wrap" >
      <table class="table-dalam">
         <tbody>
             <?php foreach(range(1,10) as $i): ?>
                 <tr >
                     <td class="td-nya">td1 </td>
                     <td class="td-nya">td2</td>
                     <td class="td-nya">td2</td>
                     <td class="td-nya">td2</td>
                 </tr> 
            <?php endforeach;?>
        </tbody>
       </table>
     </div>
   </td>
 </tr>
  </tbody>
 </table>

Źródło

3

Author: ngakak,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-09-02 09:54:41

Potrzebowałem tego samego i to rozwiązanie działało w najprostszy i najprostszy sposób:

Http://www.farinspace.com/jquery-scrollable-table-plugin/

Po prostu daję id do tabeli chcę przewijać i umieścić jedną linię w Javascript. To jest to!

Nawiasem mówiąc, najpierw pomyślałem, że chcę użyć przewijalnego div, ale nie jest to wcale konieczne. Możesz użyć div I umieścić go w nim, ale to rozwiązanie robi to, czego potrzebujemy: przewija tabelę.

1

Author: adamvagyok,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-12-01 11:28:09

To moje" kule " rozwiązanie przy użyciu html i css. Zastosowano 2 tabele i stałą szerokość tabel oraz komórki tabel

Https://jsfiddle.net/babaikawow/s2xyct24/1/

HTML:

  <div class="container">
<table class="table" border = 1; >  <!-- fixed width header -->
                            <thead >
                                <tr>
                                    <th class="tbDataId" >№</th>
                                    <th class="tbDataName">Працівник</th>
                                    <th class="tbDataData">Дата</th>
                                    <th class="tbDataData">Дійсно до</th>
                                    <th class="tbDataDiseases">Критерій1</th>
                                    <th class="tbDataDiseases">Критерій2</th>
                                    <th class="tbDataDiseases">Критерій3</th>
                                    <th class="tbDataDiseases">Критерій4</th>
                                    <th class="tbDataDiseases">Критерій5</th>  
                                </tr>
                            </thead>  
                        </table> 

                        <div class="scrollTable"> <!-- scrolling block -->
                            <table class="table" border = 1;>
                                 <tbody>
                   <tr>
                      <td class="tbDataId" >№</td>
                                    <td class="tbDataName">Працівник</td>
                                    <td class="tbDataData">Дата</td>
                                    <td class="tbDataData">Дійсно до</td>
                                    <td class="tbDataDiseases">Критерій1</td>
                                    <td class="tbDataDiseases">Критерій2</td>
                                    <td class="tbDataDiseases">Критерій3</td>
                                    <td class="tbDataDiseases">Критерій4</td>
                                    <td class="tbDataDiseases">Критерій5</td> 
                   </tr>
                    <tr>
                      <td class="tbDataId" >№</td>
                                    <td class="tbDataName">Працівник</td>
                                    <td class="tbDataData">Дата</td>
                                    <td class="tbDataData">Дійсно до</td>
                                    <td class="tbDataDiseases">Критерій1</td>
                                    <td class="tbDataDiseases">Критерій2</td>
                                    <td class="tbDataDiseases">Критерій3</td>
                                    <td class="tbDataDiseases">Критерій4</td>
                                    <td class="tbDataDiseases">Критерій5</td> 
                   </tr>
                    <tr>
                      <td class="tbDataId" >№</td>
                                    <td class="tbDataName">Працівник</td>
                                    <td class="tbDataData">Дата</td>
                                    <td class="tbDataData">Дійсно до</td>
                                    <td class="tbDataDiseases">Критерій1</td>
                                    <td class="tbDataDiseases">Критерій2</td>
                                    <td class="tbDataDiseases">Критерій3</td>
                                    <td class="tbDataDiseases">Критерій4</td>
                                    <td class="tbDataDiseases">Критерій5</td> 
                   </tr>
                    <tr>
                      <td class="tbDataId" >№</td>
                                    <td class="tbDataName">Працівник</td>
                                    <td class="tbDataData">Дата</td>
                                    <td class="tbDataData">Дійсно до</td>
                                    <td class="tbDataDiseases">Критерій1</td>
                                    <td class="tbDataDiseases">Критерій2</td>
                                    <td class="tbDataDiseases">Критерій3</td>
                                    <td class="tbDataDiseases">Критерій4</td>
                                    <td class="tbDataDiseases">Критерій5</td> 
                   </tr>
                    <tr>
                      <td class="tbDataId" >№</td>
                                    <td class="tbDataName">Працівник</td>
                                    <td class="tbDataData">Дата</td>
                                    <td class="tbDataData">Дійсно до</td>
                                    <td class="tbDataDiseases">Критерій1</td>
                                    <td class="tbDataDiseases">Критерій2</td>
                                    <td class="tbDataDiseases">Критерій3</td>
                                    <td class="tbDataDiseases">Критерій4</td>
                                    <td class="tbDataDiseases">Критерій5</td> 
                   </tr>
                                </tbody>
                            </table>
                        </div> 
</div>

CSS:

*{
  box-sizing: border-box;
}

.container{
 width:1000px;
}
.scrollTable{

    overflow: scroll;
  overflow-x: hidden;
    height: 100px;
} 
table{
margin: 0px!important;
width:983px!important;
border-collapse: collapse; 

}

/*   Styles of the th and td  */

/* Id */
.tbDataId{
    width:5%;
}

/* Дата,
Дійсно до */
.tbDataData{
    /*width:170px;*/
    width: 15%;
}

/* П І Б */
.tbDataName{
    width: 15%;
}

/*Критерії */
.tbDataDiseases{
    width:10%;
}

1

Author: Babaikawow,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-02-22 17:14:54

Skrzypek byłby bardziej pomocny, jednak z tego co rozumiem, to chyba potrzebujesz trwałych nagłówków, zajrzyj do tego

Http://css-tricks.com/persistent-headers/

0

Author: Sarmad Saleem,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-07-24 07:46:38

Ten kod działa u mnie. Dołącz jquery.plik js.

<!DOCTYPE html>
<html>

<head>
<script src="jquery.js"></script>
<script>
var headerDivWidth=0;
var contentDivWidth=0;
function fixHeader(){

var contentDivId = "contentDiv";
var headerDivId = "headerDiv";

var header = document.createElement('table');
var headerRow = document.getElementById('tableColumnHeadings'); 

/*Start : Place header table inside <DIV> and place this <DIV> before content table*/
var headerDiv = "<div id='"+headerDivId+"' style='width:500px;overflow-x:hidden;overflow-y:scroll' class='tableColumnHeadings'><table></table></div>";
$(headerRow).wrap(headerDiv);
$("#"+headerDivId).insertBefore("#"+contentDivId);
/*End : Place header table inside <DIV> and place this <DIV> before content table*/

fixColumnWidths(headerDivId,contentDivId);
}
function fixColumnWidths(headerDivId,contentDivId){
 /*Start : Place header row cell and content table first row cell inside <DIV>*/ 
            var contentFirstRowCells = $('#'+contentDivId+' table tr:first-child td');
            for (k = 0; k < contentFirstRowCells.length; k++) {
                $( contentFirstRowCells[k] ).wrapInner( "<div ></div>");
            }
            var headerFirstRowCells = $('#'+headerDivId+' table tr:first-child td');
            for (k = 0; k < headerFirstRowCells.length; k++) {
                $( headerFirstRowCells[k] ).wrapInner( "<div></div>");
            }
 /*End : Place header row cell and content table first row cell inside <DIV>*/ 

 /*Start : Fix width for columns of header cells and content first ror cells*/
            var headerColumns = $('#'+headerDivId+' table tr:first-child td div:first-child');
            var contentColumns = $('#'+contentDivId+' table tr:first-child td div:first-child');
            for (i = 0; i < contentColumns.length; i++) {
                if (i == contentColumns.length - 1) {
                    contentCellWidth = contentColumns[i].offsetWidth;
                }
                else {
                    contentCellWidth = contentColumns[i].offsetWidth;
                }
                headerCellWidth = headerColumns[i].offsetWidth;
                if(contentCellWidth>headerCellWidth){
                $(headerColumns[i]).css('width', contentCellWidth+"px");
                $(contentColumns[i]).css('width', contentCellWidth+"px");
                }else{
                $(headerColumns[i]).css('width', headerCellWidth+"px");
                $(contentColumns[i]).css('width', headerCellWidth+"px");
                }
            }
/*End : Fix width for columns of header and columns of content table first row*/
}   

    function OnScrollDiv(Scrollablediv) {
    document.getElementById('headerDiv').scrollLeft = Scrollablediv.scrollLeft;
    }
function radioCount(){
    alert(document.form.elements.length);

}   
</script>
<style>
table,th,td
{
border:1px solid black;
border-collapse:collapse;
}
th,td
{
padding:5px;
}
</style>

</head>

<body onload="fixHeader();">
<form id="form" name="form">
<div id="contentDiv" style="width:500px;height:100px;overflow:auto;" onscroll="OnScrollDiv(this)">
<table>
<!--tr id="tableColumnHeadings" class="tableColumnHeadings">
  <td><div>Firstname</div></td>
  <td><div>Lastname</div></td>      
  <td><div>Points</div></td>
  </tr>

<tr>
  <td><div>Jillsddddddddddddddddddddddddddd</div></td>
  <td><div>Smith</div></td>     
  <td><div>50</div></td>
  </tr-->

  <tr id="tableColumnHeadings" class="tableColumnHeadings">
  <td>&nbsp;</td>

  <td>Firstname</td>
  <td>Lastname</td>     
  <td>Points</td>
  </tr>

<tr style="height:0px">
<td></td>
  <td></td>
  <td></td>     
  <td></td>
  </tr>

<tr >
<td><input type="radio" id="SELECTED_ID" name="SELECTED_ID" onclick="javascript:radioCount();"/></td>
  <td>Jillsddddddddddddddddddddddddddd</td>
  <td>Smith</td>        
  <td>50</td>
  </tr>

<tr>
<td><input type="radio" id="SELECTED_ID" name="SELECTED_ID"/></td>

  <td>Eve</td>
  <td>Jackson</td>      
  <td>9400000000000000000000000000000</td>
</tr>
<tr>
<td><input type="radio" id="SELECTED_ID" name="SELECTED_ID"/></td>

  <td>John</td>
  <td>Doe</td>      
  <td>80</td>
</tr>
<tr>
<td><input type="radio" id="SELECTED_ID" name="SELECTED_ID"/></td>

  <td><div>Jillsddddddddddddddddddddddddddd</div></td>
  <td><div>Smith</div></td>     
  <td><div>50</div></td>
  </tr>
<tr>
<td><input type="radio" id="SELECTED_ID" name="SELECTED_ID"/></td>

  <td>Eve</td>
  <td>Jackson</td>      
  <td>9400000000000000000000000000000</td>
</tr>
<tr>
<td><input type="radio" id="SELECTED_ID" name="SELECTED_ID"/></td>

  <td>John</td>
  <td>Doe</td>      
  <td>80</td>
</tr>
</table>
</div>

</form>
</body>

</html>

0

Author: Venugopal,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-12-23 03:58:59

Użyj StickyTableHeaders.js do tego.

Nagłówek był przezroczysty . więc spróbuj dodać ten css .

thead {
    border-top: none;
    border-bottom: none;
    background-color: #FFF;
}

0

Author: Saajan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-05-14 11:57:14

score 31 · Accepted Answer

Może zrobisz coś takiego? Zrobiłem to od podstaw...

To, co zrobiłem, to używane 2 tabele, jedna dla nagłówka, który będzie zawsze statyczny, a druga tabela renderuje komórki, które zawinąłem za pomocą elementu div o stałej wysokości, a aby włączyć przewijanie, używam overflow-y: auto;

Upewnij się również, że używasz table-layout: fixed; z elementami o stałej szerokości td, aby twoje table nie pękało, gdy używany jest ciąg bez white space, więc inorder do łamania tego ciągu używam word-wrap: break-word;

Demo

.wrap {
    width: 352px;
}

.wrap table {
    width: 300px;
    table-layout: fixed;
}

table tr td {
    padding: 5px;
    border: 1px solid #eee;
    width: 100px;
    word-wrap: break-word;
}

table.head tr td {
    background: #eee;
}

.inner_table {
    height: 100px;
    overflow-y: auto;
}

<div class="wrap">
    <table class="head">
        <tr>
            <td>Head 1</td>
            <td>Head 1</td>
            <td>Head 1</td>
        </tr>
    </table>
    <div class="inner_table">
        <table>
        <tr>
            <td>Body 1</td>
            <td>Body 1</td>
            <td>Body 1</td>
        </tr>
        <!-- Some more tr's -->
    </table>
    </div>
</div>