HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

CSS -zelfstudie

CSS HOME CSS-introductie CSS-syntaxis CSS-kiezers CSS-handleiding CSS-opmerkingen CSS-kleuren
kleuren RGB HEX HSL
CSS-achtergronden
Achtergrond kleur Achtergrond afbeelding achtergrond herhaling Achtergrondbijlage Achtergrond steno
CSS-randen
grenzen Grensbreedte Rand kleur Rand Zijkanten Grensverkorting Afgeronde randen
CSS-marges
Marges Margin Collapse
CSS-opvulling CSS Hoogte/Breedte CSS-boxmodel CSS-overzicht
Outline Outline Width Outline Color Outline Shorthand Outline Offset
CSS-tekst
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
CSS-lettertypen
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
CSS-pictogrammen CSS-links CSS-lijsten CSS-tabellen
Tafelranden Tafelgrootte: Tabel Uitlijning Tafelstijl Tabel Responsief
CSS-weergave CSS Max-breedte CSS-positie CSS Z-index CSS-overloop CSS zweven
Float Clear Float Examples
CSS Inline-blok CSS uitlijnen CSS-combinaties CSS Pseudo-klasse CSS Pseudo-element CSS-dekking CSS-navigatiebalk
Navbar Vertical Navbar Horizontal Navbar
CSS-dropdownmenu's CSS-afbeeldingengalerij CSS-afbeeldingssprites CSS Attr-kiezers CSS-formulieren CSS-tellers CSS-websitelay-out CSS-eenheden CSS-specificiteit CSS !belangrijk CSS wiskundige functies

CSS Geavanceerd

CSS afgeronde hoeken CSS-randafbeeldingen CSS-achtergronden CSS-kleuren CSS-kleurzoekwoorden CSS-verlopen
Linear Gradients Radial Gradients Conic Gradients
CSS-schaduwen
Shadow Effects Box Shadow
CSS-teksteffecten CSS-weblettertypen CSS 2D-transformaties CSS 3D-transformaties CSS-overgangen CSS-animaties CSS-tooltips Afbeeldingen in CSS-stijl CSS-beeldreflectie CSS-object-fit CSS-objectpositie CSS-maskering CSS-knoppen CSS-Paginering CSS Meerdere kolommen CSS-gebruikersinterface CSS-variabelen
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
Grootte van CSS-box CSS-mediaquery's CSS MQ-voorbeelden CSS Flexbox
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

CSS Responsief

RWD Intro RWD-kijkpoort RWD-rasterweergave RWD-mediaquery's RWD-afbeeldingen RWD-video's RWD-frameworks RWD-sjablonen

CSS- raster

Rasterintro Rastercontainer Rasteritem

CSS SASS

SASS-zelfstudie

CSS- voorbeelden

CSS-sjablonen CSS-voorbeelden css-quiz CSS-oefeningen CSS-certificaat

CSS- referenties

CSS-referentie CSS-kiezers CSS-functies CSS Referentie Auditief CSS webveilige lettertypen CSS animeerbaar CSS-eenheden CSS PX-EM-converter CSS-kleuren CSS-kleurwaarden CSS-standaardwaarden Ondersteuning voor CSS-browser

CSS- responsieve tabel

❮ Vorig Volgende ❯

Responsieve tabel

Een responsieve tabel geeft een horizontale schuifbalk weer als het scherm te klein is om de volledige inhoud weer te geven:

Voornaam Achternaam Punten Punten Punten Punten Punten Punten Punten Punten Punten Punten Punten Punten
Jill Smit 50 50 50 50 50 50 50 50 50 50 50 50
Vooravond Jackson 94 94 94 94 94 94 94 94 94 94 94 94
Adam Johnson 67 67 67 67 67 67 67 67 67 67 67 67

Voeg een containerelement toe (zoals <div>) met overflow-x:autorond het <table>-element om het responsief te maken:

Voorbeeld

<div style="overflow-x:auto;">

<table>
... table content ...
</table>

</div>

Opmerking: in OS X Lion (op Mac) zijn schuifbalken standaard verborgen en worden ze alleen weergegeven wanneer ze worden gebruikt (zelfs als "overflow:scroll" is ingesteld).

Meer voorbeelden


Dit voorbeeld laat zien hoe je een mooie tafel maakt.


Dit voorbeeld laat zien hoe u het tabelbijschrift plaatst.

Test jezelf met oefeningen

Oefening:

Stel de rand in op "2px effen groen" voor table-, th- en td-elementen.

<style>
 {
  : 2px solid green;
}
</style>

<body>
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>
</body>

Eigenschappen CSS-tabel

Property Description
border Sets all the border properties in one declaration
border-collapse Specifies whether or not table borders should be collapsed
border-spacing Specifies the distance between the borders of adjacent cells
caption-side Specifies the placement of a table caption
empty-cells Specifies whether or not to display borders and background on empty cells in a table
table-layout Sets the layout algorithm to be used for a table

❮ Vorig Volgende ❯