Wie reagiere ich auf diese Tabelle?

Dies ist eine Tabelle mit Inline-Stilen. Es ist nicht ideal für reaktionsfreudige, also muss ich einen anderen Weg finden, den Tisch zu machen. Ich möchte, dass es so aussieht, wenn der Bildschirm in voller Größe, etwa 1140px und höher, ist. Es muss kein Tisch sein, und ich bin offen für alles. Vielleicht wären DIVs mit Medienanfragen am besten.Wie reagiere ich auf diese Tabelle?

Es ist eine Login-Seite und wenn es schrumpft, möchte ich die Schaltflächen und das Bild vergrößern und mehr Platz einnehmen. Die Tasten und das Bild müssen übereinander liegen, wenn man es verkleinert. Das verstehe ich. Die Hoffnung ist, das Layout ähnlich zu halten, wenn es in voller Größe zu dem einen ist hier:

<table style="width:100%;height:80%;margin-top:10px"> 
     <tbody><tr> 

    <td style="padding-top:10px;text-align:right;" > 
     <button style="border-radius:15px; font-size:22px;color:#e7e7e7;width:150px;height:50px;background-color:orange;box-shadow: 0 0 3px 3px #CCC;" class="btn-help" onclick="gotoHelp()">Help <img src="img/help6.png" style=""> </button> 
    </td> 

      <td style="text-align:center"> 
       <img title="PIV/CAC Login" src="img/piv-image.jpg" style=" cursor:pointer;background-repeat:no-repeat;background-size:contain;font-weight:bold;font-size:20px;width:180px" onclick="window.location.assign(&#39;tabbed.jsp&#39;)"> 
      </td> 
     <td style="padding-top:10px;text-align:left"> 
      <button type="button" style="border-radius:15px; font-size:22px;color:#e7e7e7; width:150px;height:50px; box-shadow: 0 0 3px 3px #CCC;" class="btn btn-success" onclick="window.location.assign(&#39;tabbed.jsp&#39;)"> Login <img src="img/login4.png" style=""></button> 
    </td> 

    </tr> 


    </tbody></table>

https://jsfiddle.net/Lance_Bitner/b3qxu3c3/

Quelle

2016-03-31 Lance B

Da dies keine Tabellendaten sind, wird dringend davon abgeraten, '

' zu verwenden. Sie können 'div' verwenden, um zu erreichen, was Sie wollen. Bitte geben Sie einen JSFiddle oder CodePen mit den divs und CSS getrennt als Start ein. – Roy

Antwort

Fügen Sie diese Zeilen zu Ihrem css

table { 
    width: 100%; 
    border-collapse: collapse; 
} 
@media 
only screen and (max-width: 760px), 
(min-device-width: 768px) and (max-device-width: 1024px) { 
    table, thead, tbody, th, td, tr { 
     display: block; 
     text-align: center !important; 
    } 
}

Quelle

2016-03-31 13:41:24

arbeitete wie ein Charme! –

<div class="table_main"> 
<table style="width:100%;height:80%;margin-top:10px"> 
     <tbody><tr> 

    <td style="padding-top:10px;text-align:right;" > 
     <button style="border-radius:15px; font-size:22px;color:#e7e7e7;width:150px;height:50px;background-color:orange;box-shadow: 0 0 3px 3px #CCC;" class="btn-help" onclick="gotoHelp()">Help <img src="img/help6.png" style=""> </button> 
    </td> 

      <td style="text-align:center"> 
       <img title="PIV/CAC Login" src="img/piv-image.jpg" style=" cursor:pointer;background-repeat:no-repeat;background-size:contain;font-weight:bold;font-size:20px;width:180px" onclick="window.location.assign(&#39;tabbed.jsp&#39;)"> 
      </td> 
     <td style="padding-top:10px;text-align:left"> 
      <button type="button" style="border-radius:15px; font-size:22px;color:#e7e7e7; width:150px;height:50px; box-shadow: 0 0 3px 3px #CCC;" class="btn btn-success" onclick="window.location.assign(&#39;tabbed.jsp&#39;)"> Login <img src="img/login4.png" style=""></button> 
    </td> 

    </tr> 


    </tbody></table> 
</div>

CSS

.table_main{ 
    width:100%; 
    overflow:auto; 
} 
.table_main table{ 
    width:100%; 
}

Quelle

2016-03-31 13:20:56

* Da dies keine Tabellendaten sind, wird dringend davon abgeraten, eine

zu verwenden. * «Dies sollte Ihre erste Flagge sein. – Roy

Es verbessert es @ Gaurav, aber wie bekomme ich es nicht von links nach rechts zu scrollen, wenn Größe runter? Die Schaltflächen und das Bild liegen übereinander, wenn die Seite verkleinert wird? –

das wird nur anders als diese Methode ..lesen Sie diese Dokumentation https://css-tricks.com/responsive-data-tables/ –

Ich benutze in der Regel nicht die <table>, <tr> und <td> Tags, sondern verwende ich <div> Tags mit Klassen und definieren diese als Tabellenkomponenten in der CSS, wie

.my_container { 
    display: table; 
} 
.my_rows { 
    display: table-row; 
} 
.my_cells { 
    display: table-cell; 
}

Dies hat viele Vorteile hat, ein von ihnen auch in der Lage sein, völlig andere display Parameter in Media-Abfragen für kleinere Bildschirme zu verwenden. Zum Beispiel kann ich einfach alle ehemaligen Tabellenzellen auf einem kleinen Smartphone-Bildschirm (vertikal) untereinander platzieren, anstatt sie horizontal zu platzieren, indem ich display: block in der Medienabfrage verwende.

Weitere Vorteile der Verwendung von tabellen Eigenschaften sind

die Fähigkeit, ihre Inhalte horizontal und vertikal zu zentrieren,
die Möglichkeit ihrer automatischen Verteilung über eine während Breite gegebenen unter Berücksichtigung ihres Inhalts
erreichen die gleiche vertikale Höhe für alle "Spalten" einschließlich ihrer Hintergründe ohne die Notwendigkeit für andere Methoden.

Quelle

2016-03-31 14:08:59 Johannes

Verwandte Themen