Responsive Tabelle mit unterschiedlicher Größe Spalten- und Zeilennamen

Question

ich eine Matrix erstellen bin versucht, die wie folgt aussieht:

Was mich nervt ausgeschaltet wird, wie die Spalten- und Zeilennamen mit dem reaktionsfähiger machen Gitter in der Mitte. Bisher habe ich diesen Code: jsfiddle example

t t t t 
e e e e 
x x x x 
t t t t 
0 0 0 0 text 
0 0 0 0 text 
0 0 0 0 text 
0 0 0 0 text 

Ich habe versucht, den Text zu machen, einen Teil der Matrix, sondern die unterschiedliche Größe der Elemente Risse die Ansprechempfindlichkeit für kleinere Bildschirme. Derzeit, wenn der vertikale Text nicht Teil der Matrix ist, sieht es fast gut aus, aber der horizontale Text nicht.

Ich bin auf der Suche nach ein paar Tipps, wie Sie weitermachen können.

Answer 1

Was ist mit

Text 
    Text 
    Text 
     Text 
0 0 0 0 text 
0 0 0 0 text 
0 0 0 0 text 
0 0 0 0 text 

Wenn es einander nicht fit Seite der Fall ist, setzen Sie sie auf der jeweils anderen.

Sie müssen schauen, ob es Ihren Anforderungen entspricht. (Ich würde vorschlagen, eine kleinere Schriftgröße und kleinere Zeilenhöhe für die Spaltenüberschriften dann)