/ / Скриване на лентата за придвижване в таблицата - html, css, scroll

Скриване на лентата за превъртане в таблицата - html, css, scroll

Създадох таблица, но колоните не са със същата ширина като заглавията на таблицата.
Тялото на таблицата трябва да може да се превърта и лентата за превъртане трябва да бъде скрита.
Опитах това:

.overzicht tbody {
/* body takes all the remaining available space */
flex: 1 1 auto;
display: block;
overflow: hidden;
}


html, body{
height: 99%;

overflow:hidden;
}

.table-container {
height: 573px;
}
table {
display: flex;
flex-flow: column;
width: 100%;
border: 1px solid #d0d0d0;
border-collapse: collapse;
}
.overzicht{
height: 100%;
}
table thead {
/* head takes the height it requires,
and it"s not scaled when table is resized */
flex: 0 0 auto;
width: calc(100% - 0em);
}

table tbody tr {
width: 100%;
border-top: 1px solid rgba(222, 215, 215, 0);
border-bottom: 1px solid rgba(222, 215, 215, 0);
}
table thead,
table tbody tr {
display: table;
table-layout: fixed;
}

form{
margin-bottom: 0px;
}

a{
text-decoration: none;
color: black;
}


.left{
text-align: left;
}
<table>
<tbody><tr>
<td></td><td></td>
<td><input style="width: 170px; float: right; margin: auto; display: block;" type="text" id="search" placeholder="Zoeken op Trefwoord"></td>
</tr></tbody></table><div class="table-container"><table class="overzicht scroll" border="1" id="table" style="width: 100%;"><thead>
<tr style="cursor: hand;">
<th style="width: 100px;" class="left">Debnr</th>
<th style="width: 100px;" class="left">Naam</th>
<th style="width: 100px;" class="left">Adres</th>
<th style="width: 50px;">Postcode</th>
<th style="width: 100px;" class="left">Plaats</th>

<th style="width: 100px;">Allin</th>
<th style="width: 100px;">Basis</th>
<th style="width: 100px;">Entry</th>
<th style="width: 100px;">Klanten</th>

</tr>
</thead><tbody>             <tr class="cus1 R100067" onclick=" $.post("getalles.php?ID=17&amp;A=Makosoft ICT b.v.", {}, function(data){  $("#chart_div").html(data);})" style="font-size: 14px;">

<td style="width: 100px;" class="left">
100067
</td>
<td style="width: 100px" class="left">
Makosoft ICT b.v.
</td>
<td style="width: 100px;" class="left">
Groeneboord 19
</td>
<td style="width: 50px;">
6351 EC
</td>
<td style="width: 100px;" class="left">
Bocholtz
</td>
<td style="width: 100px;" class="left">
0
</td>
<td style="width: 100px;" class="left">
0
</td>
<td style="width: 100px;" class="left">
0
</td>
<td style="width: 100px;">
<form method="POST" action="">
<input type="hidden" name="contact" value="17">
<input type="image" style="border: none; box-shadow: none;" src="img/contacts.ico" alt="Submit" width="28" height="28">
</form>
</td>
</tr>        <tr class="cus1 R100076" onclick=" $.post("getalles.php?ID=18&amp;A=Paksoft Direct B.V.", {}, function(data){  $("#chart_div").html(data);})" style="font-size: 14px;">

<td style="width: 100px;" class="left">
100076
</td>
<td style="width: 100px" class="left">
Paksoft Direct B.V.
</td>
<td style="width: 100px;" class="left">
Kruiningenstraat 114
</td>
<td style="width: 50px;">
5045 PZ
</td>
<td style="width: 100px;" class="left">
Tilburg
</td>
<td style="width: 100px;" class="left">
3
</td>
<td style="width: 100px;" class="left">
36
</td>
<td style="width: 100px;" class="left">
0
</td>
<td style="width: 100px;">
<form method="POST" action="">
<input type="hidden" name="contact" value="18">
<input type="image" style="border: none; box-shadow: none;" src="/images/img/contacts.ico" alt="Submit" width="28" height="28">
</form>
</td>
</tr>        <tr class="cus1 R100077" onclick=" $.post("getalles.php?ID=19&amp;A=Solit Vastgoed B.V.", {}, function(data){  $("#chart_div").html(data);})" style="font-size: 14px;">

<td style="width: 100px;" class="left">
100077
</td>
<td style="width: 100px" class="left">
Solit Vastgoed B.V.
</td>
<td style="width: 100px;" class="left">
Zuiddijk 255a
</td>
<td style="width: 50px;">
1501 CK
</td>
<td style="width: 100px;" class="left">
Zaandam
</td>
<td style="width: 100px;" class="left">

</td>
<td style="width: 100px;" class="left">

</td>
<td style="width: 100px;" class="left">

</td>
<td style="width: 100px;">
<form method="POST" action="">
<input type="hidden" name="contact" value="19">
<input type="image" style="border: none; box-shadow: none;" src="img/contacts.ico" alt="Submit" width="28" height="28">
</form>
</td>
</tr>        <tr class="cus1 R100085" onclick=" $.post("getalles.php?ID=20&amp;A=ISSYS ICT B.V.", {}, function(data){  $("#chart_div").html(data);})" style="font-size: 14px;">

<td style="width: 100px;" class="left">
100085
</td>
<td style="width: 100px" class="left">
ISSYS ICT B.V.
</td>
<td style="width: 100px;" class="left">
Daltonstraat 11a
</td>
<td style="width: 50px;">
1704 SX
</td>
<td style="width: 100px;" class="left">
Heerhugowaard
</td>
<td style="width: 100px;" class="left">
237
</td>
<td style="width: 100px;" class="left">
90
</td>
<td style="width: 100px;" class="left">
0
</td>
<td style="width: 100px;">
<form method="POST" action="">
<input type="hidden" name="contact" value="20">
<input type="image" style="border: none; box-shadow: none;" src="/images/img/contacts.ico" alt="Submit" width="28" height="28">
</form>
</td>
</tr>        <tr class="cus1 R100091" onclick=" $.post("getalles.php?ID=22&amp;A=12HostIT", {}, function(data){  $("#chart_div").html(data);})" style="font-size: 14px;">

<td style="width: 100px;" class="left">
100091
</td>
<td style="width: 100px" class="left">
12HostIT
</td>
<td style="width: 100px;" class="left">
Francis Picabiastraat 32
</td>
<td style="width: 50px;">
3059 RP
</td>
<td style="width: 100px;" class="left">
Rotterdam
</td>
<td style="width: 100px;" class="left">

</td>
<td style="width: 100px;" class="left">

</td>
<td style="width: 100px;" class="left">

</td>
<td style="width: 100px;">
<form method="POST" action="">
<input type="hidden" name="contact" value="22">
<input type="image" style="border: none; box-shadow: none;" src="img/contacts.ico" alt="Submit" width="28" height="28">
</form>
</td>
</tr>        <tr class="cus1 R100095" onclick=" $.post("getalles.php?ID=23&amp;A=Spiering beveiliging en telecom", {}, function(data){  $("#chart_div").html(data);})" style="font-size: 14px;">

<td style="width: 100px;" class="left">
100095
</td>
<td style="width: 100px" class="left">
Spiering beveiliging en telecom
</td>
<td style="width: 100px;" class="left">
Kleermakerstraat 53
</td>
<td style="width: 50px;">
1991 JL
</td>
<td style="width: 100px;" class="left">
Velserbroek
</td>
<td style="width: 100px;" class="left">
0
</td>
<td style="width: 100px;" class="left">
0
</td>
<td style="width: 100px;" class="left">
0
</td>
<td style="width: 100px;">
<form method="POST" action="">
<input type="hidden" name="contact" value="23">
<input type="image" style="border: none; box-shadow: none;" src="/images/img/contacts.ico" alt="Submit" width="28" height="28">
</form>
</td>
</tr>        <tr class="cus1 R100100" onclick=" $.post("getalles.php?ID=24&amp;A=Actv8 Networks BV", {}, function(data){  $("#chart_div").html(data);})" style="font-size: 14px;">

<td style="width: 100px;" class="left">
100100
</td>
<td style="width: 100px" class="left">
Actv8 Networks BV
</td>
<td style="width: 100px;" class="left">
Losplaats 16c
</td>
<td style="width: 50px;">
5404 NJ
</td>
<td style="width: 100px;" class="left">
Uden
</td>
<td style="width: 100px;" class="left">
32
</td>
<td style="width: 100px;" class="left">
72
</td>
<td style="width: 100px;" class="left">
0
</td>
<td style="width: 100px;">
<form method="POST" action="">
<input type="hidden" name="contact" value="24">
<input type="image" style="border: none; box-shadow: none;" src="img/contacts.ico" alt="Submit" width="28" height="28">
</form>
</td>
</tr>        <tr class="cus1 R100112" onclick=" $.post("getalles.php?ID=25&amp;A=Hans Hoogveld Telecom en Internet BV", {}, function(data){  $("#chart_div").html(data);})" style="font-size: 14px;">

<td style="width: 100px;" class="left">
100112
</td>
<td style="width: 100px" class="left">
Hans Hoogveld Telecom en Internet BV
</td>
<td style="width: 100px;" class="left">
Langstraat 10a
</td>
<td style="width: 50px;">
6691 EG
</td>
<td style="width: 100px;" class="left">
Gendt
</td>
<td style="width: 100px;" class="left">

</td>
<td style="width: 100px;" class="left">

</td>
<td style="width: 100px;" class="left">

</td>
<td style="width: 100px;">
<form method="POST" action="">
<input type="hidden" name="contact" value="25">
<input type="image" style="border: none; box-shadow: none;" src="/images/img/contacts.ico" alt="Submit" width="28" height="28">
</form>
</td>
</tr>        <tr class="cus1 R100118" onclick=" $.post("getalles.php?ID=27&amp;A=Jetron Developments B.V.", {}, function(data){  $("#chart_div").html(data);})" style="font-size: 14px;">

<td style="width: 100px;" class="left">
100118
</td>
<td style="width: 100px" class="left">
Jetron Developments B.V.
</td>
<td style="width: 100px;" class="left">
Nucleonweg 22
</td>
<td style="width: 50px;">
4706 PZ
</td>
<td style="width: 100px;" class="left">
Roosendaal
</td>
<td style="width: 100px;" class="left">
9
</td>
<td style="width: 100px;" class="left">
5
</td>
<td style="width: 100px;" class="left">
0
</td>
<td style="width: 100px;">
<form method="POST" action="">
<input type="hidden" name="contact" value="27">
<input type="image" style="border: none; box-shadow: none;" src="img/contacts.ico" alt="Submit" width="28" height="28">
</form>
</td>
</tr>        <tr class="cus1 R100120" onclick=" $.post("getalles.php?ID=28&amp;A=Kreuze Managed Services B.V.", {}, function(data){  $("#chart_div").html(data);})" style="font-size: 14px;">

<td style="width: 100px;" class="left">
100120
</td>
<td style="width: 100px" class="left">
Kreuze Managed Services B.V.
</td>
<td style="width: 100px;" class="left">
Amerikalaan 14
</td>
<td style="width: 50px;">
6199 AE
</td>
<td style="width: 100px;" class="left">
Maastricht
</td>
<td style="width: 100px;" class="left">
972
</td>
<td style="width: 100px;" class="left">
408
</td>
<td style="width: 100px;" class="left">
30
</td>
<td style="width: 100px;">
<form method="POST" action="">
<input type="hidden" name="contact" value="28">
<input type="image" style="border: none; box-shadow: none;" src="/images/img/contacts.ico" alt="Submit" width="28" height="28">
</form>
</td></tr> <tr class="cus1 R100136" onclick=" $.post("getalles.php?ID=30&amp;A=Bdata B.V.", {}, function(data){  $("#chart_div").html(data);})" style="font-size: 14px;">

<td style="width: 100px;" class="left">
100136
</td>
<td style="width: 100px" class="left">
Bdata B.V.
</td>
<td style="width: 100px;" class="left">
Harderwijk 7
</td>
<td style="width: 50px;">
7418 BA
</td>
<td style="width: 100px;" class="left">
Deventer
</td>
<td style="width: 100px;" class="left">
0
</td>
<td style="width: 100px;" class="left">
0
</td>
<td style="width: 100px;" class="left">
0
</td>
<td style="width: 100px;">
<form method="POST" action="">
<input type="hidden" name="contact" value="30">
<input type="image" style="border: none; box-shadow: none;" src="img/contacts.ico" alt="Submit" width="28" height="28">
</form>
</td>
</tr>        <tr class="cus1 R100138" onclick=" $.post("getalles.php?ID=31&amp;A=Adfocom Automatisering B.V.", {}, function(data){  $("#chart_div").html(data);})" style="font-size: 14px;">

<td style="width: 100px;" class="left">
100138
</td>
<td style="width: 100px" class="left">
Adfocom Automatisering B.V.
</td>
<td style="width: 100px;" class="left">
Eikenlaan 233
</td>
<td style="width: 50px;">
2404 BP
</td>
<td style="width: 100px;" class="left">
Nederland
</td>
<td style="width: 100px;" class="left">
0
</td>
<td style="width: 100px;" class="left">
0
</td>
<td style="width: 100px;" class="left">
0
</td>
<td style="width: 100px;">
<form method="POST" action="">
<input type="hidden" name="contact" value="31">
<input type="image" style="border: none; box-shadow: none;" src="/images/img/contacts.ico" alt="Submit" width="28" height="28">
</form>
</td>
</tr>        <tr class="cus1 R100670" onclick=" $.post("getalles.php?ID=98&amp;A=ESI Solutions bv", {}, function(data){  $("#chart_div").html(data);})" style="font-size: 14px;">

<td style="width: 100px;" class="left">
100670
</td>
<td style="width: 100px" class="left">
ESI Solutions bv
</td>
<td style="width: 100px;" class="left">
Sprendlingenstraat 50
</td>
<td style="width: 50px;">
5061 KN
</td>
<td style="width: 100px;" class="left">
Oisterwijk
</td>
<td style="width: 100px;" class="left">
9
</td>
<td style="width: 100px;" class="left">
0
</td>
<td style="width: 100px;" class="left">
0
</td>
<td style="width: 100px;">
<form method="POST" action="">
<input type="hidden" name="contact" value="98">
<input type="image" style="border: none; box-shadow: none;" src="img/contacts.ico" alt="Submit" width="28" height="28">
</form>
</td>
</tr>        <tr class="cus1 R100901" onclick=" $.post("getalles.php?ID=99&amp;A=Connectron Systems BV", {}, function(data){  $("#chart_div").html(data);})" style="font-size: 14px;">

<td style="width: 100px;" class="left">
100901
</td>
<td style="width: 100px" class="left">
Connectron Systems BV
</td>
<td style="width: 100px;" class="left">
Jan Tinbergenstraat 8a
</td>
<td style="width: 50px;">
5491 DC
</td>
<td style="width: 100px;" class="left">
Sint-Oedenrode
</td>
<td style="width: 100px;" class="left">
4
</td>
<td style="width: 100px;" class="left">
21
</td>
<td style="width: 100px;" class="left">
0
</td>
<td style="width: 100px;">
<form method="POST" action="">
<input type="hidden" name="contact" value="99">
<input type="image" style="border: none; box-shadow: none;" src="/images/img/contacts.ico" alt="Submit" width="28" height="28">
</form>
</td>
</tr>        <tr class="cus1 R100876" onclick=" $.post("getalles.php?ID=100&amp;A=Kirema Cloud Technology", {}, function(data){  $("#chart_div").html(data);})" style="font-size: 14px;">

<td style="width: 100px;" class="left">
100876
</td>
<td style="width: 100px" class="left">
Kirema Cloud Technology
</td>
<td style="width: 100px;" class="left">
Harmelerwaard 1B
</td>
<td style="width: 50px;">
3481 LB
</td>
<td style="width: 100px;" class="left">
HARMELEN
</td>
<td style="width: 100px;" class="left">
9
</td>
<td style="width: 100px;" class="left">
42
</td>
<td style="width: 100px;" class="left">
0
</td>
<td style="width: 100px;">
<form method="POST" action="">
<input type="hidden" name="contact" value="100">
<input type="image" style="border: none; box-shadow: none;" src="img/contacts.ico" alt="Submit" width="28" height="28">
</form>
</td>
</tr>        <tr class="cus1 R100950" onclick=" $.post("getalles.php?ID=101&amp;A=Vision Value B.V.", {}, function(data){  $("#chart_div").html(data);})" style="font-size: 14px;">

<td style="width: 100px;" class="left">
100950
</td>
<td style="width: 100px" class="left">
Vision Value B.V.
</td>
<td style="width: 100px;" class="left">
Postbus 1554
</td>
<td style="width: 50px;">
3800 BN
</td>
<td style="width: 100px;" class="left">
Amersfoort
</td>
<td style="width: 100px;" class="left">
5
</td>
<td style="width: 100px;" class="left">
2
</td>
<td style="width: 100px;" class="left">
0
</td>
<td style="width: 100px;">
<form method="POST" action="">
<input type="hidden" name="contact" value="101">
<input type="image" style="border: none; box-shadow: none;" src="/images/img/contacts.ico" alt="Submit" width="28" height="28">
</form>
</td>
</tr>        <tr class="cus1 R100979" onclick=" $.post("getalles.php?ID=102&amp;A=Lanwise BV", {}, function(data){  $("#chart_div").html(data);})" style="font-size: 14px;">

<td style="width: 100px;" class="left">
100979
</td>
<td style="width: 100px" class="left">
Lanwise BV
</td>
<td style="width: 100px;" class="left">
Najaarsweg 21b
</td>
<td style="width: 50px;">
7532 SK
</td>
<td style="width: 100px;" class="left">
Enschede
</td>
<td style="width: 100px;" class="left">

</td>
<td style="width: 100px;" class="left">

</td>
<td style="width: 100px;" class="left">

</td>
<td style="width: 100px;">
<form method="POST" action="">
<input type="hidden" name="contact" value="102">
<input type="image" style="border: none; box-shadow: none;" src="img/contacts.ico" alt="Submit" width="28" height="28">
</form>
</td>
</tr>        <tr class="cus1 R100999" onclick=" $.post("getalles.php?ID=103&amp;A=VR Communicatie", {}, function(data){  $("#chart_div").html(data);})" style="font-size: 14px;">

<td style="width: 100px;" class="left">
100999
</td>
<td style="width: 100px" class="left">
VR Communicatie
</td>
<td style="width: 100px;" class="left">
Hooidonk 6
</td>
<td style="width: 50px;">
5275 HT
</td>
<td style="width: 100px;" class="left">
Den Dungen
</td>
<td style="width: 100px;" class="left">
1
</td>
<td style="width: 100px;" class="left">
10
</td>
<td style="width: 100px;" class="left">
0
</td>
<td style="width: 100px;">
<form method="POST" action="">
<input type="hidden" name="contact" value="103">
<input type="image" style="border: none; box-shadow: none;" src="/images/img/contacts.ico" alt="Submit" width="28" height="28">
</form>
</td>
</tr></tbody></table></div>

Когато използвам overflow: hidden тогава не мога да превъртя.
Ето това имам сега:
Jsfiddle

Може ли някой да конфигурира моята маса, така че все още да я превъртате, но лентата за превъртане е скрита?
Не маркирайте това като дубликат, защото аз прочетох тези статии, но не ми помага за проблема.

Отговори:

0 за отговор № 1

Осигуряване overflow-x: hidden вместо overflow: hidden.

Актуализирана цигулка: http://jsfiddle.net/nashcheez/5GCsJ/7050/


Свързани въпроси


Коментари (0)

Добави коментар