隐藏表

Question

我创建了一个表，但列的宽度与表头的宽度不同 表体必须是可滚动的，并且需要隐藏滚动条 我试过这个：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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="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="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="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="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="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="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="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="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="img/contacts.ico" alt="Submit" width="28" height="28">
                </form>
            </td>
            </tr></tbody></table></div>

＆＃13;

＆＃13;

＆＃13;

当我使用overflow: hidden时，我无法滚动。
这就是我现在所拥有的：
Jsfiddle

有人可以配置我的表，使其仍然可滚动，但滚动条是隐藏的吗？ 不要将此标记为重复，因为我已经阅读了这些文章，但它对我的问题没有帮助。

Answer 1

提供overflow-x: hidden代替overflow: hidden。

更新了小提琴：http://jsfiddle.net/nashcheez/5GCsJ/7050/