CSS Tabelle

krgewb

krgewb

Top Contributor
Meine Tabelle sieht so aus wie auf a.png. Ich möchte aber, dass sie so aussieht wie auf b.png.
HTML: 
    <style>
      p {
        margin: 0px;
      }
      table {
        border: 0px;
      }
      td, th {
        border: 1px solid black;
        text-align: center;
      }
      td {
        width: 20px;
        height: 20px;
      }
    </style>

HTML: 
<table>
   <tr>
      <td>0</td>
      <td>0</td>
      <td>1</td>
   </tr>
   <tr>
      <td>0</td>
      <td>1</td>
      <td>2</td>
   </tr>
   <tr>
      <td>1</td>
      <td>3</td>
      <td>4</td>
   </tr>
</table>
 

Anhänge

  • a.png
    a.png
    16,7 KB · Aufrufe: 20
  • b.png
    b.png
    15 KB · Aufrufe: 21
Zuletzt bearbeitet:
mihe7

mihe7

Top Contributor
HTML: 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Tabelle</title>
  <style>
    p {
      margin: 0px;
    }
    table {
      border: 0.5px solid black;
      border-spacing: 0px;
    }
    td, th {
      border: 0.5px solid black;
      text-align: center;
    }
    td {
      width: 20px;
      height: 20px;
    }
    .hl-top { border-top-width: 5px; }
    .hl-left { border-left-width: 5px; }
    .hl-right { border-right-width: 5px; }
    .hl-bottom { border-bottom-width: 5px; }
    </style>
</head>
<body>
  <table>
    <tr>
      <td class="hl-left hl-top">0</td>
      <td class="hl-top hl-right">0</td>
      <td>1</td>
    </tr>
    <tr>
      <td class="hl-left hl-bottom">0</td>
      <td class="hl-bottom hl-right">1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>3</td>
      <td>4</td>
    </tr>
  </table>
</body>

Habe ich schon erwähnt, dass mich CSS nervt? :)
 
Thallius

Thallius

Top Contributor
Oneixee5 hat gesagt.:
Das table-Element sollte man nicht mehr für das Layout der Oberfläche verwenden. Es gibt heute viel bessere Ansätze, die auch auf kleinen Displays und Mobilgeräten funktionieren, @see: https://www.mediaevent.de/css/display-table.html
Zum Vergrößern anklicken....

Das stimmt so nicht. Tabellen haben immer noch ihre Berechtigung dort wo man Tabellen darstellen will und hier ist das ja wohl der Fall.

@krgewb

Das erste Problem hättest du auch einfach erreichen können indem du das padding der Tabelle explizit auf 0 gesetzt hättest.
 
Oneixee5

Oneixee5

Top Contributor
Thallius hat gesagt.:
Das stimmt so nicht. Tabellen haben immer noch ihre Berechtigung dort wo man Tabellen darstellen will und hier ist das ja wohl der Fall.

@krgewb

Das erste Problem hättest du auch einfach erreichen können indem du das padding der Tabelle explizit auf 0 gesetzt hättest.
Zum Vergrößern anklicken....
Beide Aussagen sind falsch, ich habe nicht geschrieben, dass dort wo man Tabellen darstellen will kein table-Element verwenden soll.

Das mit dem padding stimmt auch nicht:
HTML: 
<table style="padding: 0; border: solid 1px;" cellpadding="0">
    <tbody>
        <tr style="">
            <td style="border: solid 1px;">foo</td>
            <td style="border: solid 1px;">bar</td>
        </tr>
    </tbody>
</table>
 
Ähnliche Java Themen
  Titel Forum Antworten Datum
P Bootstrap . Responsive Tabelle HTML / CSS 0
T [JS] Extrahiere werte aus HTML Tabelle (td) aber nur bestimmten Teil HTML / CSS 5
P Tabelle Aktualisieren mit AJAX + JavaServer faces HTML / CSS 2

Ähnliche Java Themen

Aktuelle Jobs

Neue Themen


Oben