Table: Width, Margin, usw. von bleumi85, 26.07.2016 18:42

Table: Width, Margin, usw.

bleumi85 26.07.2016 18:42

Hallo liebes Forum!

Ich habe mir einen Kalender mittels PHP gebaut und jetzt soll der "schön" werden. Optisch sieht meiner allerdings so aus: Kalender unschön

Mein Problem ist jetzt, dass ich es nicht hinbekomme den tbody unterhalb der caption zu positionieren, weder mit margin, noch mit padding, noch mit sonstwas. Und mein Zeil das ich erreichen möchte ist dieses hier: Kalender schön

Das ist mein Aufbau für den Januar 2016:

<table class="kalender" id="cal-1">
  <caption><span>Januar</span><br><span>2016</span></caption>
  <thead>
    <tr>
      <th>KW</th>
      <th>Mo</th>
      <th>Di</th>
      <th>Mi</th>
      <th>Do</th>
      <th>Fr</th>
      <th>Sa</th>
      <th>So</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="kal_kw">53</td>
      <td class="tag_anderer">28</td>
      <td class="tag_anderer">29</td>
      <td class="tag_anderer">30</td>
      <td class="tag_anderer">31</td>
      <td class="tag_standard">1</td>
      <td class="tag_standard">2</td>
      <td class="tag_standard">3</td>
    <tr>
    <tr>
      <td class="kal_kw">1</td>
      <td class="tag_standard">4</td>
      <td class="tag_standard">5</td>
      <td class="tag_standard">6</td>
      <td class="tag_standard">7</td>
      <td class="tag_standard">8</td>
      <td class="tag_standard">9</td>
      <td class="tag_standard">10</td>
    <tr>
  </tbody>
</table>

Und mein zugehöriges CSS zum testen sieht bisher wie folgt aus:

body{
	background:#333;
	text-align:center;
}

.kalender{
	width:40em;
	height:40em;
	background:blue;
}

.kalender caption{
	background:white;
	text-transform:uppercase;
	padding:1em;
	width:38em;
}

.kalender caption span:last-child{
	font-size:0.6em;
	color:#bbb;
}

.kalender{
	display:inline-block;
	margin:3em;
	border-collapse:collapse;
}

.kalender th, .kalender td{
	width:4em;
	height:4em;
	border:1px solid #ccc;
}