HTML-Tabelle, um spaltenweise zu rendern

Question

Ich habe diese grundlegende Tabelle, wo ich Row-Elemente so rendern soll, dass es in vertikaler Reihenfolge rendern sollte. Jede <td> innerhalb <tr> sollte in vertikaler Reihenfolge gedruckt werden.

CSS und HTML:

table.spec-table {border: 1px solid #fff; width: 100%; margin: 0 0 4em 0} 
 
table.spec-table>tr>th {background-color: #333; color: #fff; font-weight: bold;} 
 
table.spec-table tr:nth-child(even) {background: #ddd} 
 
table.spec-table tr:nth-child(odd) {background: #eee} 
 
table.spec-table tr:first-child  {background: #666; color: #fff; font-weight: bold} 
 
table.spec-table th, td {font-size: .9em; padding: 7px; text-align: left;}

<table class="spec-table" id="here_table"> 
 
    <tr> 
 
    <th colspan='4'>Single Mode</th> 
 
    </tr> 
 
    <tr> 
 
    <td>&nbsp;</td> 
 
    <td>feature1</td> 
 
    <td>feature2</td> 
 
    <td>feature3</td> 
 
    </tr> 
 
    <tr> 
 
    <td>value1</td> 
 
    <td>value2</td> 
 
    <td>value3</td> 
 
    <td>value4</td> 
 
    </tr> 
 
    <tr> 
 
    <td>test1</td> 
 
    <td>test2</td> 
 
    <td>test3</td> 
 
    <td>test4</td> 
 
    </tr> 
 
</table>

Um diese Aufgabe zu erfüllen, habe ich nur noch zwei CSS-Eigenschaft und sein Rendering als erwartet, aber der Tabellenentwurf verstreut.

table.spec-table {border: 1px solid #fff; width: 100%; margin: 0 0 4em 0} 
 
table.spec-table>tr>th {background-color: #333; color: #fff; font-weight: bold;} 
 
table.spec-table tr:nth-child(even) {background: #ddd} 
 
table.spec-table tr:nth-child(odd) {background: #eee} 
 
table.spec-table tr:first-child  {background: #666; color: #fff; font-weight: bold} 
 
table.spec-table th, td {font-size: .9em; padding: 7px; text-align: left;} 
 

 
tr.orientation { display: inline-block;} 
 
tr.orientation th, tr.orientation td { display:block; }

<table class="spec-table" id="here_table"> 
 
    <tr> 
 
    <th colspan='4'>Single Mode</th> 
 
    </tr> 
 
    <tr class="orientation"> 
 
    <td>&nbsp;</td> 
 
    <td>feature1</td> 
 
    <td>feature2</td> 
 
    <td>feature3</td> 
 
    </tr> 
 
    <tr class="orientation"> 
 
    <td>value1</td> 
 
    <td>value2</td> 
 
    <td>value3</td> 
 
    <td>value4</td> 
 
    </tr> 
 
    <tr class="orientation"> 
 
    <td>test1</td> 
 
    <td>test2</td> 
 
    <td>test3</td> 
 
    <td>test4</td> 
 
    </tr> 
 
</table>

Kann mir jemand helfen, den Tabellenentwurf zu beheben wie vor ähnlich aussehen.

Answer 1

Versuchen Sie folgendes:

table.spec-table {border: 1px solid #fff; width: 100%; margin: 0 0 4em 0} 
 
table.spec-table>tr>th {background-color: #333; color: #fff; font-weight: bold;} 
 
table.spec-table tr td:nth-child(even) {background: #ddd} 
 
table.spec-table tr td:nth-child(odd) {background: #eee} 
 
table.spec-table tr:first-child {background: #666; color: #fff; font-weight: bold} 
 
table.spec-table th, td {font-size: .9em; padding: 7px; text-align: left;} 
 

 
tr.orientation { display: table-cell;} 
 
tr.orientation th, tr.orientation td {  
 
    display: grid; 
 
    border-bottom: 2px solid #fff; 
 
}

<table class="spec-table" id="here_table"> 
 
    <tr> 
 
    <th colspan='4'>Single Mode</th> 
 
    </tr> 
 
    <tr class="orientation"> 
 
    <td>&nbsp;</td> 
 
    <td>feature1</td> 
 
    <td>feature2</td> 
 
    <td>feature3</td> 
 
    </tr> 
 
    <tr class="orientation"> 
 
    <td>value1</td> 
 
    <td>value2</td> 
 
    <td>value3</td> 
 
    <td>value4</td> 
 
    </tr> 
 
    <tr class="orientation"> 
 
    <td>test1</td> 
 
    <td>test2</td> 
 
    <td>test3</td> 
 
    <td>test4</td> 
 
    </tr> 
 
</table>

Answer 2

Versuchen Sie folgendes:

table.spec-table {border: 1px solid #fff; width: 100%; margin: 0 0 4em 0} 
 
table.spec-table >tr >th {background-color: #333; color: #fff; font-weight: bold;} 
 
table.spec-table tr:nth-child(even) {background: #ddd} 
 
table.spec-table tr:nth-child(odd) {background: #eee} 
 
table.spec-table tr:first-child {background: #666; color: #fff; font-weight: bold} 
 
table.spec-table th, td {font-size: .9em; padding: 7px; text-align: left;}

<table class="spec-table" id="here_table"> 
 
    <tr> 
 
    <th colspan='4'>Single Mode</th> 
 
    </tr> 
 
    <tr> 
 
    <th>feature1</th> 
 
    <td>value1</td> 
 
    <td>test1</td> 
 
    </tr> 
 
    <tr> 
 
    <th>feature2</th> 
 
    <td>value2</td> 
 
    <td>test2</td> 
 
    </tr> 
 
    <tr> 
 
    <th>feature3</th> 
 
    <td>value3</td> 
 
    <td>test3</td> 
 
    </tr> 
 
</table>

Answer 3

nur Ihre CSS aktualisiert:

<style> 
table.spec-table {border: 1px solid #fff; width: 100%; margin: 0 0 4em 0} 
table.spec-table>tr>th {background-color: #333; color: #fff; font-weight: bold;} 
table.spec-table tr td:nth-child(even) {background: #eee} 
table.spec-table tr td:nth-child(odd) {background: #ddd} 
table.spec-table tr:first-child  {background: #666; color: #fff; font-weight: bold} 
table.spec-table th, td {font-size: .9em; padding: 7px; text-align: left;} 

tr.orientation { display: inline-block;width: 33.3%;} 
tr.orientation th, tr.orientation td { display:block; } 
td{border: 1px solid #fff;padding: 10px 67px;} 
</style> 

Answer 4

Ist das, was Sie meinen?

table{ 
 
    width:100%; 
 
    border:1px solid #ddd; 
 
} 
 
table tr td, table tr th{ 
 
    border:1px solid #ddd; 
 
}

<table> 
 
    <thead> 
 
    <tr><th colspan="3">Single Mode</th></tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td></td> 
 
     <td>value1</td> 
 
     <td>test1</td> 
 
    </tr> 
 
    <tr> 
 
     <td>feature1</td> 
 
     <td>value2</td> 
 
     <td>test2</td> 
 
    </tr> 
 
    <tr> 
 
     <td>feature2</td> 
 
     <td>value3</td> 
 
     <td>test3</td> 
 
    </tr> 
 
    <tr> 
 
     <td>feature3</td> 
 
     <td>value4</td> 
 
     <td>test4</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 5

table.spec-table {border: 1px solid #fff; width: 100%; margin: 0 0 4em 0} 
 
table.spec-table>tr>th {background-color: #333; color: #fff; font-weight: bold;} 
 
table.spec-table tr:nth-child(even) {background: #ddd} 
 
table.spec-table tr:nth-child(odd) {background: #eee} 
 
table.spec-table tr:first-child  {background: #666; color: #fff; font-weight: bold} 
 
table.spec-table th, td {font-size: .9em; padding: 7px; text-align: left;} 
 

 
tr.orientation { display: inline-block;width:100%;} 
 
tr.orientation th, tr.orientation td { display:block;width: 21%;float: left;}

<table class="spec-table" id="here_table"> 
 
     <thead> 
 
     <tr> 
 
      <th colspan='4'>Single Mode</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr class="orientation"> 
 
      <td>&nbsp;</td> 
 
      <td>feature1</td> 
 
      <td>feature2</td> 
 
      <td>feature3</td> 
 
      </tr> 
 
      <tr class="orientation"> 
 
      <td>value1</td> 
 
      <td>value2</td> 
 
      <td>value3</td> 
 
      <td>value4</td> 
 
      </tr> 
 
      <tr class="orientation"> 
 
      <td>test1</td> 
 
      <td>test2</td> 
 
      <td>test3</td> 
 
      <td>test4</td> 
 
      </tr> 
 
     </tbody> 
 
    </table>