CSS: Ausrichten Spalte in Tabelle

Question

Sorry für dumme Frage. Ich bin neu in CSS. Ich habe folgende Benutzeroberfläche:

ich folgenden Code haben:

<div class="row centered-form center-block"> 
       <div class="container col-md-10 col-md-offset-1"> 
        <table class="table"> 
         <tr> 
          <td> 
           <h4><span class="label label-default">Hello</span></h4> 
          </td> 
          <td> 
           <h4><span class="label label-success">World</span></h4> 
          </td> 
         </tr> 
         <tr> 
          <td> 
           <h4><span class="label label-default">Hello Hello</span></h4> 
          </td> 
          <td> 
           <h4><span class="label label-success">World World</span></h4> 
          </td> 
         </tr> 
         <tr> 
          <td> 
           <h4><span class="label label-default">Hello Hello Hello</span></h4> 
          </td> 
          <td> 
           <h4><span class="label label-success">World World World</span></h4> 
          </td> 
         </tr> 
        </table> 

        <br/> 

        <div class="row centered-form center-block"> 
         <div class="container col-md-10 col-md-offset-1"> 
          <div class="form-inline"> 
           <div class="form-group" style="width: 40%;"> 
            <button class="btn btn-default"> 
             Hello 
            </button> 
           </div> 
           <div class="form-group" style="width: 40%;"> 
            <button class="btn btn-default"> 
             World 
            </button> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 

ich verschiedene Ansätze ausprobiert und war nicht erfolgreich. Ich treffe die ganze Zeit Probleme. Bitte zeigen Sie mir eine effektive Möglichkeit, die Ausrichtung in CSS zu verwalten. Ich möchte alles nach grünen Linien ausrichten, entsprechend linke Spalte ist right-aligned und rechte Spalte left-aligned.

Answer 1

ich mit Pete Kommentar darüber einig, dass Tabellen nicht für das Layout verwendet werden sollen, aber wenn man weiter, dann können Sie die folgenden Arten verwenden:

table { 
 
    width: 100%; 
 
} 
 
td:nth-child(odd) { /* every first column in the 2 column table */ 
 
    padding-right: 50px; /* this is for that gap down the middle */ 
 
    text-align: right; /* align the column to the right */ 
 
} 
 
td:nth-child(even) { /* every second column in the 2 column table */ 
 
    padding-left: 50px; /* this is for that gap down the middle */ 
 
    text-align: left; /* align the column to the left */ 
 
} 
 
td { 
 
    width: 50%; /* equal width columns */ 
 
    box-sizing: border-box; 
 
}

<table class="table"> 
 
    <tr> 
 
    <td> 
 
     <h4><span class="label label-default">Hello</span></h4> 
 
    </td> 
 
    <td> 
 
     <h4><span class="label label-success">World</span></h4> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <h4><span class="label label-default">Hello Hello</span></h4> 
 
    </td> 
 
    <td> 
 
     <h4><span class="label label-success">World World</span></h4> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <h4><span class="label label-default">Hello Hello Hello</span></h4> 
 
    </td> 
 
    <td> 
 
     <h4><span class="label label-success">World World World</span></h4> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 2

Hier ist eine einfache Lösung für die effiziente Ausrichtung Spalten in einer Tabelle, die für mich funktioniert. Benötigt JQuery und Bootstrap ...

dieses Skript Setzen Sie in unten unten auf der Seite:

<script> 
    for (i = 0; i < 10; i++) { 
    $(".col" + i + "r th:nth-of-type(" + i + ")").addClass("text-right"); 
    $(".col" + i + "r td:nth-of-type(" + i + ")").addClass("text-right"); 
    $(".col" + i + "c th:nth-of-type(" + i + ")").addClass("text-center"); 
    $(".col" + i + "c td:nth-of-type(" + i + ")").addClass("text-center"); 
    } 
</script> 

zuordnen Klassen in der Tabelle Tag mit folgenden Syntax:

"col" + colnumber + ausrichten

z. col2r = Spalte 2 rechtsbündig (Spalte 1 ist linke Spalte)

z. col3c = Spalte 3 zentriert ausrichten

linksbündig ist eine Standardausrichtung, also brauchen Sie diese hier nicht abzudecken.

z.

class = "Tabelle col2r col3c" oder class = "Tabelle col2c col3r"

Hinweis: th hier enthalten ist. 10 ist die Anzahl der Spalten .. entsprechend anpassen.

Hier ist eine Geige: https://jsfiddle.net/kcwbhczy/