Wie Tabelle mit Medienabfrage zu brechen?

Ich habe Probleme mit dem Tisch zu brechen, um schneller zu reagieren. Bitte werfen Sie einen Blick auf diese Bilder, und sagen Sie mir, wie es geht mit css.Wie Tabelle mit Medienabfrage zu brechen?

Image of existing table to break

Image of the desired result

Quelle

2016-06-15 Maciej

Können Sie den Code zur Verfügung stellen Sie bereits in einem Snippet geschrieben bitte? So können wir sehen, was Sie getan haben und Ihnen helfen, es zu korrigieren! – Julqas

Sie Anzeige zurücksetzen können und verwenden Sie das Flex-Modell:

/* break table */ 
 
tr { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    width: 100%; 
 
} 
 

 
td { 
 
    display: block; 
 
    width: 50%; 
 
    text-align: center; 
 
} 
 

 
td[colspan] { 
 
    width: 100%; 
 
} 
 

 
/* demo purpose */ 
 
table { 
 
    counter-reset: tds; 
 
    counter-increment: tds -1; 
 
    width: 100%; 
 
} 
 

 
td { 
 
    border: solid 1px; 
 
} 
 

 
td:before { 
 
    counter-increment: tds; 
 
    content: 'TD 'counter(tds); 
 
} 
 

 
body { 
 
    width: 500px; 
 
    margin: auto; 
 
} 
 

 

 

 

 
* { 
 
    box-sizing: border-box; 
 
}

<table> 
 
    <tr> 
 
    <td> </td> 
 
    <td> </td> 
 
    <td colspan="2"> </td> 
 
    <td colspan="2"> </td> 
 
    </tr> 
 
    <tr> 
 
    <td> </td> 
 
    <td> </td> 
 
    <td> </td> 
 
    <td> </td> 
 
    <td> </td> 
 
    <td> </td> 
 
    </tr> 
 
    <tr> 
 
    <td> </td> 
 
    <td> </td> 
 
    <td> </td> 
 
    <td> </td> 
 
    <td> </td> 
 
    <td> </td> 
 
    </tr> 
 
    <tr> 
 
    <td> </td> 
 
    <td> </td> 
 
    <td colspan="2"> </td> 
 
    <td colspan="2"> </td> 
 
    </tr> 
 
    <tr> 
 
    <td> </td> 
 
    <td> </td> 
 
    <td> </td> 
 
    <td> </td> 
 
    <td> </td> 
 
    <td> </td> 
 
    </tr> 
 
</table>

Verwenden mediaqueries Anzeige zu aktualisieren, wenn Sie es brauchen passieren.DEMO

Quelle

2016-06-15 12:00:23

Das hat für mich funktioniert! Du bist sehr hilfreich! Vielen Dank :) – Maciej

Ich glaube nicht, dass es möglich ist, eine Tabelle nur mit CSS zu brechen. Um zu tun, was Sie wollen, müssen Sie JS verwenden und entsprechend der Breite des Fensters würden Sie Ihre Tabelle neu strukturieren.

Wenn Sie jedoch nur suchen, Ihre Website reaktionsfähiger zu machen, haben Sie einige interessante Techniken hier: https://css-tricks.com/responsive-data-table-roundup/

Quelle

2016-06-15 11:31:50

nicht wirklich möglich, ohne JavaScript, kann man nicht Arttabelle Spaltenumbrüche.

Andere Option könnte sein, Tabelle mit Flexbox-Gitter zu divs zu wiederholen.

Quelle

2016-06-15 11:32:17

Dies ist nicht, was Tabellen sind. Sie könnten die Tabellenstile hacken, aber das ist eine schlechte Übung. Leichter wäre zum Beispiel werden:

ältere Bootstrap-grid - https://getbootstrap.com/

oder besser Flexbox - https://css-tricks.com/snippets/css/a-guide-to-flexbox/

bearbeiten Tabelle, tr, tbody und andere zeigen ist eine schlechte Praxis als gut, es wird zerstören es Funktionalität (vertikale Ausrichtung und viele andere). Verwenden Sie einfach divs und stylen Sie sie als Ihre reaktionsschnelle Tabelle. Am besten wäre es, sie mit Flexbox oder zumindest Bootstrap-Grid zu stylen.

Quelle

2016-06-15 11:33:19 pavelccz

Ich denke, das wird Ihnen helfen.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Table responsive</title> 
<style> 
body { 
    margin:0; 
    padding:0; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:13px; 
} 
table { 
    width:100%; 
    text-align:center; 
} 
td { 
    border-bottom:1px solid #ccc; 
    padding:10px 0; 
} 
@media (max-width:600px) { 
table { 
    display:block; 
    width:100%; 
    padding:0; 
    margin:0 auto; 
} 
tbody, tr { 
    display:block; 
    width:100%; 
} 
table td { 
    display:inline-block; 
    float:left; 
    width:50%; 
} 
td[colspan="2"] { 
    display:block; 
    width:100%; 
} 
} 
</style> 
</head> 

<body> 
<table border="0" cellpadding="0" cellspacing="0"> 
    <tr> 
    <td>TD00</td> 
    <td>TD01</td> 
    <td colspan="2">Colspan 2</td> 
    <td colspan="2">Colspan 2</td> 
    </tr> 
    <tr> 
    <td>TD00</td> 
    <td>TD00</td> 
    <td>TD00</td> 
    <td>TD00</td> 
    <td>TD00</td> 
    <td>TD00</td> 
    </tr> 
    <tr> 
    <td>TD00</td> 
    <td>TD00</td> 
    <td>TD00</td> 
    <td>TD00</td> 
    <td>TD00</td> 
    <td>TD00</td> 
    </tr> 
    <tr> 
    <td>TD00</td> 
    <td>TD00</td> 
    <td>TD00</td> 
    <td>TD00</td> 
    <td>TD00</td> 
    <td>TD00</td> 
    </tr> 
</table> 
</body> 
</html>

Quelle

2016-06-15 11:55:53 Nehemiah

versuchen Sie bitte diese

<style type="text/css"> 


    td { 
     border: 1px solid; 
     text-align: center; 
    } 
    .t1{ 
     margin: 0 auto; 
     text-align: center; 
     min-width: 600px; 
    } 
    .t2{ 
     margin: 0 auto; 
     text-align: center; 
     display: none; 
    } 
     @media (max-width: 600px){ 
      .t1{display: none;} 
      .t2{display: table;width: 100%;} 
     } 
</style>

HTML

 <tr> 

      <td>dsds</td> 
      <td>dsdsd</td> 
      <td colspan="2">sds</td> 
      <td colspan="2">dsdd</td> 

     </tr> 
     <tr> 

      <td>dsds</td> 
      <td>dsdsd</td> 
      <td>sds</td> 
      <td>dsdd</td> 
      <td>sds</td> 
      <td>dsdd</td> 

     </tr> 
     <tr> 

      <td>dsds</td> 
      <td>dsdsd</td> 
      <td colspan="2">sds</td> 
      <td colspan="2">dsdd</td> 

     </tr> 
     <tr> 

      <td>dsds</td> 
      <td>dsdsd</td> 
      <td>sds</td> 
      <td>dsdd</td> 
      <td>sds</td> 
      <td>dsdd</td> 

     </tr>

 <tr> 

      <td>dsds</td> 
      <td>dsdsd</td> 


     </tr> 
     <tr> 

      <td colspan="2">sds</td> 

     </tr> 
     <tr> 


      <td colspan="2">dsdd</td> 

     </tr> 
     <tr> 

      <td>dsds</td> 
      <td>dsdsd</td> 

     </tr>

Quelle

2016-06-15 12:01:13 iyyappan

Wie Tabelle mit Medienabfrage zu brechen?

Antwort

Verwandte Themen