Hur man skapar: horisontell tabell

Hur man skapar en horisontell tabell

Hur man använder CSS float Skapa en horisontell tabell med egenskaper:

Exempel

* {
  box-sizing: border-box;
}
/* Skapa tvåkolonnerslayout */
.column {
  float: left;
  width: 50%;
  padding: 5px;
}
/* Clearfix (ta bort flytande) */
.row::after {
  content: "";
  clear: both;
  display: table;
}

Prova själv

Hur man använder CSS flex Skapa en horisontell tabell med egenskaper:

Exempel

* {
  box-sizing: border-box;
}
.row {
  display: flex;
}
.column {
  flex: 50%;
  padding: 5px;
}

Prova själv

Observera:Flexbox stöds inte i Internet Explorer 10 och tidigare versioner. Använd float eller flex Beror på dig. Men om du behöver stödja IE10 och äldre versioner, bör du använda float.

Tips:För mer information om modulen för Flexible Box-beklädnad, läs vår CSS Flexbox-tutorial.

Lägg till responsivitet

Ovanstående exempel kommer att se ut mindre snyggt på mobila enheter eftersom två kolumner kommer att ta upp för mycket utrymme på sidan.

För att skapa en responsiv tabell som byter från tvåkolonnerslayout till en fullbreddslayout på mobila enheter, lägg till följande media query:

Exempel

/* Responsiv layout - Plocka ihop två kolumner på skärmar med mindre än 600 pixlar, istället för att sätta dem bredvid varandra */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Prova själv

Relevanta sidor

Handledning:CSS-tabell

Handledning:CSS-flyt

Handledning:CSS Flexbox