JSFiddle - React, Tailwind, and code Playground

by mrcl

HTML

<table cellpadding=0 cellspacing=0>
<tr class=kopf><td class=merkmal>Merkmale</td><td>Lös 1</td><td>Lös 2</td><td>Lös 3</td><td>Lös 4</td><td>Lös 5</td><td>Lös 6</td></tr>
<tr><td class=merkmal>Funktion</td><td>~</td><td>~</td><td>~</td><td>~</td><td>~</td><td>~</td></tr>
<tr><td class=merkmal><span class=tree>├ </span>Erfassung</td><td>~</td><td>~</td><td>~</td><td>~</td><td>~</td><td>~</td></tr>
<tr><td class=merkmal><span class=tree>│ ├ </span>Eingang</td><td>~</td><td>~</td><td>~</td><td>~</td><td>~</td><td>~</td></tr>
<tr><td class=merkmal><span class=tree>│ │ ├ </span>Eingangskanäle</td><td>~</td><td>~</td><td>~</td><td>~</td><td>~</td><td>~</td></tr>
<tr class=auspraegung><td class=merkmal><span class=tree>│ │ │ ├ </span>Scans</td><td>~</td><td>~</td><td>~</td><td>~</td><td>~</td><td>~</td></tr>
<tr class=auspraegung><td class=merkmal><span class=tree>│ │ │ ├ </span>Import-E-Mail</td><td>~</td><td>~</td><td>~</td><td>~</td><td>~</td><td>~</td></tr>
<tr class=auspraegung><td class=merkmal><span class=tree>│ │ │ ├ </span>Fax</td><td>~</td><td>~</td><td>~</td><td>~</td><td>~</td><td>~</td></tr>
<tr class=auspraegung><td class=merkmal><span class=tree>│ │ │ └ </span>EDI</td><td>~</td><td>~</td><td>~</td><td>~</td><td>~</td><td>~</td></tr>
<tr><td class=merkmal><span class=tree>│ │ └ </span>Trennen Mehrseiten-Rechnungen</td><td>~</td><td>~</td><td>~</td><td>~</td><td>~</td><td>~</td></tr>
<tr class=auspraegung><td class=merkmal><span class=tree>│ │   ├ </span>Trennblätter</td><td>~</td><td>~</td><td>~</td><td>~</td><td>~</td><td>~</td></tr>
<tr class=auspraegung><td class=merkmal><span class=tree>│ │   ├ </span>Barcode-Etiketten</td><td>~</td><td>~</td><td>~</td><td>~</td><td>~</td><td>~</td></tr>
<tr class=auspraegung><td class=merkmal><span class=tree>│ │   └ </span>Direkte Erkennung</td><td>~</td><td>~</td><td>~</td><td>~</td><td>~</td><td>~</td></tr>
<tr><td class=merkmal><span class=tree>│ ├ </span>Text und Layout erkennen...

CSS

td {
    font-family:sans-serif;
    font-size:9pt;
    padding:-1px;
    margin:-10px;
    line-height:124%;
 }
 .tree {
     font-family:monospace;white-space: pre-wrap; padding:0px; font-size:11pt;line-height:10pt;
     transform:scale(1,1.5); 
    -webkit-transform:scale(1,1.5); 
    -moz-transform:scale(1,1.5); 
    -ms-transform:scale(1,1.5); 
    -o-transform:scale(1,1.5); 
    
 }

tr {background:white;}

tr:not(.auspraegung):not(.kopf) td:not(.merkmal) {color:rgba(0,0,0,0)}

tr:nth-child(2n) {background:#d6ffda;}
tr.kopf td {border-bottom:2px solid black!important;}



td {text-align:center;border-left:1px solid black; padding-left:2px; padding-right:2px;}
.merkmal {text-align:left;border-left:none;}

.deg90 {  
    -moz-transform: rotate(-90.0deg); 
      -ms-transform: rotate(-90.0deg);
       -o-transform: rotate(-90.0deg); 
  -webkit-transform: rotate(-90.0deg); 
          transform: rotate(-90.0deg); 
}