93 views

Tafelbladeren met HTML en CSS [DUPLICEER]

Hosted by Code Expert
html

Ik heb een tabel zoals die ik vul met een gegevens 

<table id="products-table"  style="overflow-y:scroll" >
    <thead>
        <tr>
            <th>Product (Parent Product)</th> 
            <th>Associated Sites</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        @for (int i = 0; i < Model.Count(); i++)
        { 
        <tr>
            <td>
                <a href="Edit"><strong>@Model.ElementAt(i).Name</strong></a><br />
            </td>
            <td>
                <span class="lesser"></span>
            </td>
            <td>@Html.ActionLink("Edit Product", "Edit", "Products")<br />
                @Html.ActionLink("Associate Site", "Associate", "Products")
            </td>
         </tr>
        }
        <tr>
</tbody>
</table>

en CSS zoals dat 

   #products-table
{
     width: 200px;
    height: 400px;
    overflow:scroll;
}

Maar scroll werkt niet, ik wil de hoogte van de tabel oplossen en als het overschrijdt, werkt dan met schuifbalk

1, Autoriteit 100%

Tabel met vaste koptekst 

<table cellspacing="0" cellpadding="0" border="0" width="325">
  <tr>
    <td>
       <table cellspacing="0" cellpadding="1" border="1" width="300" >
         <tr style="color:white;background-color:grey">
            <th>Header 1</th>
            <th>Header 2</th>
         </tr>
       </table>
    </td>
  </tr>
  <tr>
    <td>
       <div style="width:320px; height:80px; overflow:auto;">
         <table cellspacing="0" cellpadding="1" border="1" width="300" >
           <tr>
             <td>new item</td>
             <td>new item</td>
           </tr>
           <tr>
             <td>new item</td>
             <td>new item</td>
           </tr>
              <tr>
             <td>new item</td>
             <td>new item</td>
           </tr>
              <tr>
             <td>new item</td>
             <td>new item</td>
           </tr>
              <tr>
             <td>new item</td>
             <td>new item</td>
           </tr>
              <tr>
             <td>new item</td>
             <td>new item</td>
           </tr>
              <tr>
             <td>new item</td>
             <td>new item</td>
           </tr>
              <tr>
             <td>new item</td>
             <td>new item</td>
           </tr>
              <tr>
             <td>new item</td>
             <td>new item</td>
           </tr>
              <tr>
             <td>new item</td>
             <td>new item</td>
           </tr>
         </table>  
       </div>
    </td>
  </tr>
</table>

Antwoord 2, autoriteit 36%

Laat antwoord, een ander idee, maar erg kort.

  1. zet de inhoud van koptekstcellen in div
  2. repareer de kop inhoud, zie CSS
table  { margin-top:  20px; display: inline-block; overflow: auto; }
th div { margin-top: -20px; position: absolute; }

Houd er rekening mee dat het mogelijk is om een tabel als inline-block weer te geven vanwege anonieme tabelobjecten:

“ontbrekende” [in HTML-tabelboomstructuur]-elementen moeten worden aangenomen om het tabelmodel te laten werken. Elk tabelelement genereert automatisch de nodige anonieme tabelobjecten om zichzelf heen.

/* scrolltable rules */
table  { margin-top:  20px; display: inline-block; overflow: auto; }
th div { margin-top: -20px; position: absolute; }
/* design */
table { border-collapse: collapse; }
tr:nth-child(even) { background: #EEE; }
<table style="height: 150px">
  <tr> <th><div>first</div> <th><div>second</div>
  <tr> <td>foo <td>bar
  <tr> <td>foo foo foo foo foo <td>bar
  <tr> <td>foo <td>bar
  <tr> <td>foo <td>bar bar bar
  <tr> <td>foo <td>bar
  <tr> <td>foo <td>bar
  <tr> <td>foo <td>bar
  <tr> <td>foo <td>bar
  <tr> <td>foo <td>bar
  <tr> <td>foo <td>bar
  <tr> <td>foo <td>bar
  <tr> <td>foo <td>bar
  <tr> <td>foo <td>bar
  <tr> <td>foo <td>bar
</table>

Antwoord 3, autoriteit 8%

Voor degenen die zich afvragen hoe Garry’s oplossing met meer dan één header moet worden geïmplementeerd, dit is het:

#wrapper {
  width: 235px;
}
table {
  border: 1px solid black;
  width: 100%;
}
th,
td {
  width: 100px;
  border: 1px solid black;
}
thead>tr {
  position: relative;
  display: block;
}
tbody {
  display: block;
  height: 80px;
  overflow: auto;
}
<div id="wrapper">
  <table>
    <thead>
      <tr>
        <th>column1</th>
        <th>column2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>row1</td>
        <td>row1</td>
      </tr>
      <tr>
        <td>row2</td>
        <td>row2</td>
      </tr>
      <tr>
        <td>row3</td>
        <td>row3</td>
      </tr>
      <tr>
        <td>row4</td>
        <td>row4</td>
      </tr>
    </tbody>
  </table>
</div>

Antwoord 4, autoriteit 5%

Werkt alleen in Chrome, maar kan worden aangepast aan andere moderne browsers. Tabel valt terug naar gemeenschappelijke tabel met schuifbalk in andere brws.
Gebruikt CSS3 FLEX-eigenschap.

http://jsfiddle.net/4SUP8/1/

<table border="1px" class="flexy">
    <caption>Lista Sumnjivih vozila:</caption>
    <thead>
        <tr>
            <td>Opis Sumnje</td>
        <td>Registarski<br>broj vozila</td>
        <td>Datum<br>Vreme</td>
        <td>Brzina<br>(km/h)</td>
        <td>Lokacija</td>
        <td>Status</td>
        <td>Akcija</td>
        </tr>
    </thead>
    <tbody>
        <tr>
        <td>Osumnjičen tranzit</td>
        <td>NS182TP</td>
        <td>23-03-2014 20:48:08</td>
        <td>11.3</td>
        <td>Raskrsnica kod pumpe<br></td>
        <td></td>
        <td>Prikaz</td>
        </tr>
        <tr>
        <tr>
        <td>Osumnjičen tranzit</td>
        <td>NS182TP</td>
        <td>23-03-2014 20:48:08</td>
        <td>11.3</td>
        <td>Raskrsnica kod pumpe<br></td>
        <td></td>
        <td>Prikaz</td>
        </tr>
        <tr>
        <tr>
        <td>Osumnjičen tranzit</td>
        <td>NS182TP</td>
        <td>23-03-2014 20:48:08</td>
        <td>11.3</td>
        <td>Raskrsnica kod pumpe<br></td>
        <td></td>
        <td>Prikaz</td>
        </tr>
        <tr>
        <tr>
        <td>Osumnjičen tranzit</td>
        <td>NS182TP</td>
        <td>23-03-2014 20:48:08</td>
        <td>11.3</td>
        <td>Raskrsnica kod pumpe<br></td>
        <td></td>
        <td>Prikaz</td>
        </tr>
    </tbody>
</table>

Stijl (CSS 3):

caption {
    display: block;
    line-height: 3em;
    width: 100%;
    -webkit-align-items: stretch;
    border: 1px solid #eee;
}
       .flexy {
            display: block;
            width: 90%;
            border: 1px solid #eee;
            max-height: 320px;
            overflow: auto;
        }
        .flexy thead {
            display: -webkit-flex;
            -webkit-flex-flow: row;
        }
        .flexy thead tr {
            padding-right: 15px;
            display: -webkit-flex;
            width: 100%;
            -webkit-align-items: stretch;
        }
        .flexy tbody {
            display: -webkit-flex;
            height: 100px;
            overflow: auto;
            -webkit-flex-flow: row wrap;
        }
        .flexy tbody tr{
            display: -webkit-flex;
            width: 100%;
        }
        .flexy tr td {
            width: 15%;
        }

Antwoord 5, autoriteit 3%

Dit werkt voor mij

Demo: jsfiddle

$(function() 
{
    Fixed_Header();
});

function Fixed_Header()
{
    $('.User_Table thead').css({'position': 'absolute'});
    $('.User_Table tbody tr:eq("2") td').each(function(index,e){
        $('.User_Table thead tr th:eq("'+index+'")').css({'width' : $(this).outerWidth() +"px" });
    });
    var Header_Height = $('.User_Table thead').outerHeight();
    $('.User_Table thead').css({'margin-top' : "-"+Header_Height+"px"});
    $('.User_Table').css({'margin-top' : Header_Height+"px"});
}

6, Autoriteit 3% 

<div style="overflow:auto">
    <table id="table2"></table>
</div>

Probeer deze code voor overflow tabel
het werkt alleen op div-tag

7, Autoriteit 2%

voegt een vervagende gradiënt toe aan een overloop HTML-tabelelement om beter aan te geven dat er meer inhoud is om te worden geschoven.

  • tafel met vaste koptekst
  • Overflow scroll verloop
  • aangepaste schuifbalk

Zie het live-voorbeeld hieronder: 

$("#scrolltable").html("<table id='cell'><tbody></tbody></table>");
$("#cell").append("<thead><tr><th><div>First col</div></th><th><div>Second col</div></th></tr></thead>");
for (var i = 0; i < 40; i++) {
  $("#scrolltable > table > tbody").append("<tr><td>" + "foo" + "</td><td>" + "bar" + "</td></tr>");
}
/* Table with fixed header */
table,
thead {
  width: 100%;
  text-align: left;
}
#scrolltable {
  margin-top: 50px;
  height: 120px;
  overflow: auto;
  width: 200px;
}
#scrolltable table {
  border-collapse: collapse;
}
#scrolltable tr:nth-child(even) {
  background: #EEE;
}
#scrolltable th div {
  position: absolute;
  margin-top: -30px;
}
/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
/* Overflow scroll gradient */
.overflow-scroll-gradient {
  position: relative;
}
.overflow-scroll-gradient::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 240px;
  height: 25px;
  background: linear-gradient( rgba(255, 255, 255, 0.001), white);
  pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overflow-scroll-gradient">
  <div id="scrolltable">
  </div>
</div>

Antwoord 8

 .outer {
    overflow-y: auto;
    height: 300px;
  }
  .outer {
    width: 100%;
    -layout: fixed;
  }
  .outer th {
    text-align: left;
    top: 0;
    position: sticky;
    background-color: white;
  }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>MYCRUD</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid col-md-11">
  <div class="row">
    <div class="col-lg-12">
        <div class="card-body">
          <div class="outer">
            <table class="table table-hover bg-light">
              <thead>
                <tr>
                  <th scope="col">ID</th>
                  <th scope="col">Marca</th>
                  <th scope="col">Editar</th>
                  <th scope="col">Eliminar</th>
                </tr>
              </thead>
              <tbody>
                  <tr>
                    <td>4</td>
                    <td>Toyota</td>
                    <td> <a class="btn btn-success" href="#">
                        <i class="fa fa-edit"></i>
                      </a>
                    </td>
                    <td> <a class="btn btn-danger" href="#">
                        <i class="fa fa-trash"></i>
                      </a>
                    </td>
                  </tr>
                                  <tr>
                    <td>3</td>
                    <td>Honda </td>
                    <td> <a class="btn btn-success" href="#">
                        <i class="fa fa-edit"></i>
                      </a>
                    </td>
                    <td> <a class="btn btn-danger" href="#">
                        <i class="fa fa-trash"></i>
                      </a>
                    </td>
                  </tr>
                                  <tr>
                    <td>5</td>
                    <td>Myo</td>
                    <td> <a class="btn btn-success" href="#">
                        <i class="fa fa-edit"></i>
                      </a>
                    </td>
                    <td> <a class="btn btn-danger" href="#">
                        <i class="fa fa-trash"></i>
                      </a>
                    </td>
                  </tr>
                                  <tr>
                    <td>6</td>
                    <td>Acer</td>
                    <td> <a class="btn btn-success" href="#">
                        <i class="fa fa-edit"></i>
                      </a>
                    </td>
                    <td> <a class="btn btn-danger" href="#">
                        <i class="fa fa-trash"></i>
                      </a>
                    </td>
                  </tr>
                                  <tr>
                    <td>7</td>
                    <td>HP</td>
                    <td> <a class="btn btn-success" href="#">
                        <i class="fa fa-edit"></i>
                      </a>
                    </td>
                    <td> <a class="btn btn-danger" href="#">
                        <i class="fa fa-trash"></i>
                      </a>
                    </td>
                  </tr>
                                  <tr>
                    <td>8</td>
                    <td>DELL</td>
                    <td> <a class="btn btn-success" href="#">
                        <i class="fa fa-edit"></i>
                      </a>
                    </td>
                    <td> <a class="btn btn-danger" href="#">
                        <i class="fa fa-trash"></i>
                      </a>
                    </td>
                  </tr>
                                  <tr>
                    <td>9</td>
                    <td>LOGITECH</td>
                    <td> <a class="btn btn-success" href="#">
                        <i class="fa fa-edit"></i>
                      </a>
                    </td>
                    <td> <a class="btn btn-danger" href="#">
                        <i class="fa fa-trash"></i>
                      </a>
                    </td>
                  </tr>
                              </tbody>
            </table>
          </div>
        </div>
    </div>
  </div>
</div>
</body>
</html>
Previous articleConversie van string naar char – c++
Next articleHoe een uitzondering in Python afdrukken?

Other episodes

Invoertype=wachtwoord, laat de browser het wachtwoord niet onthouden

html Code Expert - 0
Ik herinner me dat ik een manier heb gezien om een ​​<input type="password" />te hebben, zodat de browser nietde gebruiker vraagt ​​om het wachtwoord...
Read more

VueJS/browser caching productie builds

html Code Expert - 0
Ik heb een VueJS-app. Telkens wanneer ik npm run builduitvoer, wordt er een nieuwe set dist/*-bestanden gemaakt, echter wanneer ik ze op de server...
Read more

Verhogingspijlen aanpassen bij invoer van typenummer met CSS

html Code Expert - 0
Ik heb een typenummer ingevoerd dat wordt weergegeven met de volgende code: <input class="quantity" id="id_form-0-quantity" min="0" name="form-0-quantity" value="1" type="number"> Het ziet er zo uit: Ik zou...
Read more

Angular 4 img src is niet gevonden

html Code Expert - 0
Ik heb een probleem met het vinden van een afbeelding met hoek 4. Hij blijft me vertellen dat de afbeelding niet is gevonden. Mapstructuur: app_folder/ app_component/ ...
Read more

HTML-tags binnen <label>

html Code Expert - 0
Ik heb een tabel op een pagina die bestaat uit selectievakjes in de cellen aan de linkerkant en beschrijvingen in de cellen aan de...
Read more

Items die alle kolommen/rijen beslaan met behulp van CSS-rasterlay-out

html Code Expert - 0
Nu de CSS-rasterlay-outmodule binnenkort in Firefox en Chrome wordt geleverd, dacht ik dat ik zou proberen te begrijpen hoe ik het moet gebruiken. Ik heb...
Read more

Angular 2 Hash (#) van de URL verwijderen

html Code Expert - 0
Ik probeer het #-teken van de url in Angular 2 te verwijderen, maar ik kon geen goede uitleg vinden over hoe ik het kan...
Read more

© Copyright - Code Expert 2021