CSS：對齊表中的列

Question

對不起愚蠢的問題。我對css很陌生。我有以下的用戶界面：

我有以下代碼：

<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> 

我嘗試不同的方法，並沒有取得成功。我一直都遇到問題。請讓我看看在CSS中管理路線的有效方法。我想通過綠線對齊所有內容，因此左列爲right-aligned，右列爲left-aligned。

Answer 1

我與皮特的意見，即表不應該被用於佈局，但如果繼續，那麼你可以使用下面的風格一致：

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

下面是有效地對準一個簡單的解決方案表格中的列適用於我。需要jQuery和引導......

將這個腳本在網頁的底部：

<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> 

分配班表標籤使用此語法：

「關口」 + colnumber +對齊

例如。 col2r =第2列右對齊（第1列是左列）

例如。 col3c =第3列中心對齊

left align是默認對齊方式，因此無需在此處覆蓋此對象。

例如。

類= 「表col2r col3c」 或 類= 「表col2c col3r」

注：號被包括在這裏。 10是列數..相應調整。

這裏有一個小提琴： https://jsfiddle.net/kcwbhczy/