ブートストラップテーブルは動的に列を移動します

Question

私は6列のテーブルを持っています。私は最初に2を左に引っ張り、最後に4つを右に引っ張るようにしています。私は彼らのコンテンツのサイズに応じて、両側から積み重ねてほしい。たとえば、最後の2つに内容がない場合は、すべてを右の枠線に貼り付ける必要があります。しかし、最後のものが表示されるべきxピクセルを必要とするコンテンツを有する場合、第5のものは、右の境界から始まってxピクセルの左に移動されるべきである。

私はtdタグにpull-rightとpull-leftクラスを追加しようとしましたが、位置的にはうまくいきますが、行間の境界線が消えてしまいました。列の間にスペースが残っていました。行には、どの列にも含まれていないスペースがありました。

これはまったく適切ではないので、私はそのようなデザインを行うためのきれいな方法を探しています。それはまた、応答する必要があります。あなたのアイデアを共有してくれてありがとう！

編集：ここに私のコードは、それはこれだけのクラスに焦点を当て、およびカスタムクラスと関連する個別のCSSはありません、それは唯一のブートストラップですERBにあります：

<table class="table table-hover table-responsive cards-table"> 
 
      <tbody> 
 
      <% @cards_not_completed.each do |card| %> 
 
       <tr class="cards-row-clickable" data-link='<%= edit_card_path(card) %>' data-params="<%= params[:page_completed] %>@!<%= params[:page_not_completed] %>"> 
 
       <td class="checkbox-column pull-left"> 
 
        <%= form_for card, :html => {:class => "checkbox_completed_card"}, remote: true do |f| %> 
 
         <%= f.check_box :is_completed %> 
 
        <% end %> 
 
       </td> 
 
       <td class="title-column pull-left"><%= card.title %></td> 
 
       <td class="dueat-column pull-right"><%= card.due_at %></td> 
 
       <td class="creator-column pull-right"><%= User.find(card.user_id).email %></td> 
 
       <td class="assignee-column pull-right"> 
 
        <% if !card.assignee_id.blank? %><%= User.find(card.assignee_id).email %> 
 
        <% end %> 
 
       </td> 
 
       <td class="destroy-column pull-right"> 
 
        <%= link_to card, method: :delete, data: {confirm: 'Are you sure?', params: {page_completed: params[:page_completed].to_param, page_not_completed: params[:page_not_completed].to_param}}, remote: true do %> 
 
         <span class="glyphicon glyphicon-trash"></span> 
 
        <% end %> 
 
       </td> 
 
       </tr> 
 
      <% end %> 
 
      </tbody> 
 
     </table>

Answer 1

私はついにそれを右に引っ張り、コンテンツを動的に生成する必要があるすべての列をマージしました。そのおかげで、私は左側に常に2つの列があり、右側には動的に塗りつぶされ、flex属性のために必要なスペースが必要です。行にstyle="display: flex; flex-direction: row;"を追加し、右の列にstyle="text-align: right; flex: 1;"を追加しました。このようにして、コンテンツは右側に積み上げられます。

参照：

<tr style="display: flex; flex-direction: row;" class="cards-row-clickable" data-link='<%= edit_card_path(card) %>' data-params="<%= params[:page_completed] %>@!<%= params[:page_not_completed] %>"> 
 
        <td class="checkbox-column"> 
 
        <%= form_for card, :html => {:class => "checkbox_completed_card"}, remote: true do |f| %> 
 
         <%= f.check_box :is_completed %> 
 
        <% end %> 
 
        </td> 
 
        <td class="title-column" style="overflow: hidden;"><%= card.title %></td> 
 
        <td class="info-column" style="text-align: right; flex: 1;"> 
 
        <% if !card.due_at.blank? %> 
 
         <span style="color:red;"><%= card.due_at %> </span> 
 
        <% end %> 
 
        <span>Creator : <%= card.user.email %></span> 
 

 
        <% if !card.assignee_id.blank? %> 
 
         <span>, assignee : <%= User.find(card.assignee_id).email.slice(0..(User.find(card.assignee_id).email.index('@')-1)) %></span> 
 
        <% end %> 
 

 
        <%= link_to card, method: :delete, data: {confirm: 'Are you sure?', params: {page_completed: params[:page_completed].to_param, page_not_completed: params[:page_not_completed].to_param}}, remote: true do %> 
 
         <span class="glyphicon glyphicon-trash"></span> 
 
        <% end %> 
 
        </td> 
 
       </tr>