Linke Ausrichtung zwei verschiedene Textfelder ohne Verwendung von Spalten

Question

Ich wollte erstellen Sie eine Tabelle in HTML wie folgt, wo gibt es eine Beschreibung des Elements und dann Attribut zu dieser Beschreibung. Im Moment sieht es wie folgt aus:

----------------------------------------------------------------- 
| Column 1      | Column 2  | Column 3   | 
----------------------------------------------------------------- 
| Short text (checked)   | VA   | $100    | 
| Longer text (checked)  | DC   | $100    | 
| Very long text (checked)  | MD   | $100    | 
| Text (checked)    | SC   | $100    | 
----------------------------------------------------------------- 

Die optimale Gestaltung es so aussehen würde, wenn das Attribut „(markiert)“ wird mit Registerkarten und links mit den anderen Reihen ausgerichtet:

----------------------------------------------------------------- 
| Column 1      | Column 2  | Column 3   | 
----------------------------------------------------------------- 
| Short text   (checked) | VA   | $100    | 
| Longer text  (checked) | DC   | $100    | 
| Very long text  (checked) | MD   | $100    | 
| Text    (checked) | SC   | $100    | 
----------------------------------------------------------------- 

Wie würde ich dies mit HTML, CSS und JS erreichen, während ich auch für unterschiedliche Beschreibungslängen handle?

Edit: Ich kann nicht eine andere Spalte in der Tabelle hinzugefügt werden, da dort bereits vorhandenen Logik ist, die bis

Answer 1

, dass eine ordnungsgemäße Verwendung Fall für colspan ist bekommen messed würde, was die Anzahl der Spalten eine Zelle angibt sollte Spanne. Wenn Sie keine zusätzlichen Attribute oder Klassen auf Ihr Tabellen-Markup anwenden möchten, können Sie es mit CSS nur unter Verwendung von column-span und td:nth-child(2) lösen.

table { 
 
    width:100% 
 
} 
 

 
th { 
 
    text-align:left 
 
} 
 

 
td:nth-child(2) { 
 
    text-align:right; 
 
}

<table> 
 
    <tr> 
 
     <th colspan="2">Column 1</th> 
 
     <th>Column 2</th> 
 
     <th>Column 2</th> 
 
    </tr> 
 
    <tr> 
 
     <td>Short text</td> 
 
     <td>(checked)</td> 
 
     <td>VA</td> 
 
     <td>$100</td> 
 
    </tr> 
 
</table>