Vraag Voeg horizontale schuifbalk toe aan html-tabel


Is er een manier om een ​​horizontale schuifbalk aan een HTML-tabel toe te voegen? Ik heb het eigenlijk nodig om zowel verticaal als horizontaal door te kunnen scrollen, afhankelijk van hoe de tafel groeit, maar ik krijg geen schuifbalk om te verschijnen.


77
2018-04-04 00:57


oorsprong


antwoorden:


Heb je CSS geprobeerd? overflow eigendom?

overflow: scroll; /* Scrollbar are always visible */
overflow: auto;   /* Scrollbar is displayed as it's needed */

BIJWERKEN
Zoals andere gebruikers aangeven, dit is niet genoeg om de schuifbalken toe te voegen.
Dus bekijk en gebruik reacties en antwoorden hieronder alstublieft.


50
2018-04-04 01:01



Maak eerst een display: block van uw tafel

stel dan in overflow-x: naar auto.

table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

Mooi en schoon. Geen overbodige opmaak.

Hier zijn meer betrokken voorbeelden met ondertitels voor scrollen van een pagina op mijn website.


110
2018-05-24 13:13



Wikkel de tafel in een DIV, ingesteld met de volgende stijl:

div.wrapper {
  width: 500px;
  height: 500px;
  overflow: auto;
}

34
2018-04-04 01:04



Gebruik het CSS-kenmerk "overloop" voor deze.

Korte samenvatting:

overflow: visible|hidden|scroll|auto|initial|inherit;

bijv.

table {
    display: block;
    overflow: scroll;
}

15
2018-04-04 01:02



Ik kwam dezelfde kwestie tegen. Ik ontdekte de volgende oplossing, die alleen is getest in Chrome v31:

table {
    table-layout: fixed;
}

tbody {
    display: block;
    overflow: scroll;
}

6
2017-12-26 21:10



Ik kon geen van de bovenstaande oplossingen aan het werk krijgen. Ik vond echter een hack:

body {
  background-color: #ccc;
}

.container {
  width: 300px;
  background-color: white;
}

table {
  width: 100%;
  border-collapse: collapse;
}

td {
  border: 1px solid black;
}

/* try removing the "hack" below to see how the table overflows the .body */
.hack1 {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.hack2 {
  display: table-cell;
  overflow-x: auto;
  width: 100%;
}
<div class="container">

  <div class="hack1">
    <div class="hack2">

      <table>
        <tr>
          <td>table or other arbitrary content</td>
          <td>that will cause your page to stretch</td>
        </tr>
        <tr>
          <td>uncontrollably</td>
          <td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
        </tr>
      </table>

    </div>
  </div>

</div>


4
2018-02-11 21:41



//Representation of table
<div class="search-table-outter">
<table class="table table-responsive search-table inner">
</table>
</div>

//Css to make Horizontal Dropdown

<style>

    .search-table{table-layout: auto; margin:40px auto 0px auto; }
    .search-table, td, th {
        border-collapse: collapse;
    }
th{padding:20px 7px; font-size:15px; color:#444;}
td{padding:5px 10px; height:35px;}
    .search-table-outter { overflow-x: scroll; }
th, td { min-width: 200px; }


</style>

-2
2018-02-01 07:45