Hallo,
das Grundproblem ist mal wieder, das es sich um keine Tabellendaten handelt und eine Tabelle als Gerüst damit semantisch schon mal falsch ist.
Es handelt sich um eine einfache Liste mit Zahlen als Inhalt. Also sind ul- und li-Elemente angesagt. Dadurch wird der HTML-Quelltext gleichzeitig deutlich übersichtlicher und auch spätere Anpassungen an schmalere Fenster sind kein Problem.
Die Tabellenansicht ist sinnvoll und kann beibehalten werden. Das wird mit einer Prise CSS erledigt. Dabei können die nth-child-Selektoren ansatzweise ihre Möglichkeiten ausspielen. "Zeilen" können gelöscht oder hinzugefügt werden, ohne das das CSS angepasst werden muss.
Dafür habe ich mal folgendes Beispiel erstellt:
Code:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Alter-Auswahl</title>
<meta name="description" content="HTML5, CSS3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='http://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
<style>
/* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
display: block;
}
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
font-size: 120%;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
width: 98%;
padding: 0;
margin: 1rem auto;
}
main {
padding: 0;
margin: 0;
}
section {
max-width: 50rem;
}
section h1 {
font-family: 'Oswald';
font-size: 2rem;
letter-spacing: 0.3rem;
text-align: center;
}
ol,
ul {
background-color: white;
padding: 0;
border: 1px solid black;
margin: 0;
display: flex;
flex-wrap: wrap;
}
li {
background-color: #e8eef5;
list-style-type: none;
width: 10%;
height: 2.5rem;
border: 1px solid silver none;
margin: 1rem 0;
display: flex;
justify-content: center;
align-items: center;
}
li:nth-of-type(-1n+10) {
margin-top: 0;
}
li:nth-last-of-type(-1n+10) {
margin-bottom: 0;
}
li:nth-child(10n+1) a{
color: #0077b3;
}
a {
font-family: 'Oswald';
display: block;
color: black;
font-size: 1.9rem;
font-weight: bold;
text-decoration: none;
}
a:hover {
font-size: 2.3rem;
}
</style>
</head>
<body>
<main>
<section>
<h1>Wie alt sind Sie?</h1>
<ul>
<li><a href="#">30</a></li>
<li><a href="#">31</a></li>
<li><a href="#">32</a></li>
<li><a href="#">33</a></li>
<li><a href="#">34</a></li>
<li><a href="#">35</a></li>
<li><a href="#">36</a></li>
<li><a href="#">37</a></li>
<li><a href="#">38</a></li>
<li><a href="#">39</a></li>
<li><a href="#">40</a></li>
<li><a href="#">41</a></li>
<li><a href="#">42</a></li>
<li><a href="#">43</a></li>
<li><a href="#">44</a></li>
<li><a href="#">45</a></li>
<li><a href="#">46</a></li>
<li><a href="#">47</a></li>
<li><a href="#">48</a></li>
<li><a href="#">49</a></li>
<li><a href="#">50</a></li>
<li><a href="#">51</a></li>
<li><a href="#">52</a></li>
<li><a href="#">53</a></li>
<li><a href="#">54</a></li>
<li><a href="#">55</a></li>
<li><a href="#">56</a></li>
<li><a href="#">57</a></li>
<li><a href="#">58</a></li>
<li><a href="#">59</a></li>
<li><a href="#">60</a></li>
<li><a href="#">61</a></li>
<li><a href="#">62</a></li>
<li><a href="#">63</a></li>
<li><a href="#">64</a></li>
<li><a href="#">65</a></li>
<li><a href="#">66</a></li>
<li><a href="#">67</a></li>
<li><a href="#">68</a></li>
<li><a href="#">69</a></li>
<li><a href="#">70</a></li>
<li><a href="#">71</a></li>
<li><a href="#">72</a></li>
<li><a href="#">73</a></li>
<li><a href="#">74</a></li>
<li><a href="#">75</a></li>
<li><a href="#">76</a></li>
<li><a href="#">77</a></li>
<li><a href="#">78</a></li>
<li><a href="#">79</a></li>
<li><a href="#">80</a></li>
<li><a href="#">81</a></li>
<li><a href="#">82</a></li>
<li><a href="#">83</a></li>
<li><a href="#">84</a></li>
<li><a href="#">85</a></li>
<li><a href="#">86</a></li>
<li><a href="#">87</a></li>
<li><a href="#">88</a></li>
<li><a href="#">89</a></li>
</ul>
</section>
</main>
</body>
</html>
Gruss
MrMurphy