Guten Tag Miteinander
Ich habe einen <article>-Tag, in welchem ich eine Tabelle mit den Tags (<table>, <tr> und <td>) erstellt habe. 5 Spalten und 3 Zeilen sind es insgesamt.
<article class="article ">
<table class="table">
<tr>
<td><li><button type="button" class="Test">XY</button></li></td>
<td><li><button type="button" class="Test">XY</button></li></td>
<td><li><button type="button" class="Test">XY</button></li></td>
<td><li><button type="button" class="Test">XY</button></li></td>
<td><li><button type="button" class="Test">XY</button></li></td>
</tr>
.... das noch zwei weitere male ....
</table>
</article>
Eigenschaften vom <article> Element (css):
.article {
position: absolute;
display: block;
width: 60%;
height: 22%;
top: 15%;
left: 20%;
border-radius: 0px 5px 5px 5px;
background-color: #FFFEFE;
padding-left: 10px;
padding-top: 7.1px;
padding-bottom: 10.2px;
}
und von der Tabelle:
.Test {
width: 180px;
height: 50px;
padding: 5px;
}
So weit, so gut.
Nun habe ein Problem, mit dem responsive Webdesign (@media queries).
Kann man sich ja denken.
Das responsive Webdesign ist aber ganz gaaaannz wichtig bei dieser Webseite.
So:
Meine Frage, kann man dem Inhalt "sagen", er soll sich stetig dem <article> anpassen?
Oder muss ich das Ganze mühsam mit dem CSS hinbiegen?
An (overflow: scroll) habe ich auch schon gedacht, jedoch möchte ich jederzeit und zu jeder Ansicht alle Buttons sehen (die sind dann halt ein wenig kleiner) aber das ist mir egal.
Kann man das irgendwie machen oder bin ich einfach zu naiv? Wenn nein, gibt es Ansätze, welche dies hier bezwecken?
Schon einmal im Voraus Vielen Dank!
mslb