Antwort an „Werner“ verfassen

SELF-Forum

Spaltenabstand in (responsive) Tabellen

Werner

Hallo,

jetzt sehe ich vor lauter Bäumen (Vorschlägen) den Wald (die beste Lösung) nicht mehr.

Da ich noch nicht erfahren bin, habe ich als Beispiel von MrMurphy als Grundlage gemommen und stark verkürzt.

Mein Beispiel:

<!DOCTYPE html>
<html>
<head>
<style>
table.testtab {
  border-collapse: collapse;
}
table.testtab th,td {
  padding: 5px 10px;
  text-align: left;
}
table.testtab td {
         border-bottom: 2px solid red;
}

</style>
</head>
<body>

<h2>Test</h2>
<table class="testtab">
  <thead>
    <tr>
      <th>aaaa</th>
      <th>bbbbbb</th>
      <th>cc</th>
      <th>ddddddd</th>
    </tr> 
  </thead>
  <tbody> 
    <tr>
      <td>w111</td>
      <td>w22222</td>
      <td>w3</td>
      <td>w4444444</td>
    </tr>
    <tr>
      <td>u111111</td>
      <td>v22222</td>
      <td>w33</td>
      <td>x4444444</td>
    </tr>
   </tbody>
</table>
<br><hr><br>
<table>
  <thead>
    <tr>
      <th>aaaa</th>
      <th>bbbbbb</th>
      <th>cc</th>
      <th>ddddddd</th>
    </tr> 
  </thead>
  <tbody> 
    <tr>
      <td>w111</td>
      <td>w22222</td>
      <td>w3</td>
      <td>w4444444</td>
    </tr>
    <tr>
      <td>u111111</td>
      <td>v22222</td>
      <td>w33</td>
      <td>x4444444</td>
    </tr>
   </tbody>
</table></body>
</html>

Ergebnis:

Die border-Angabe wirkt wie erwartet für die Tabelle mit class-Angabe, die padding-Angabe wirkt aber auch bei der anderen Tabelle, warum?

freiwillig, öffentlich sichtbar
freiwillig, öffentlich sichtbar
freiwillig, öffentlich sichtbar

Ihre Identität in einem Cookie zu speichern erlaubt es Ihnen, Ihre Beiträge zu editieren. Außerdem müssen Sie dann bei neuen Beiträgen nicht mehr die Felder Name, E-Mail und Homepage ausfüllen.

abbrechen