부트 스트랩 테이블이 동적으로 열을 이동합니다.

Question

테이블이 6 개 있습니다. 나는 2를 왼쪽으로 당기고, 4는 오른쪽으로 당긴다. 콘텐츠의 크기에 따라 양면에서 쌓아두기를 바랍니다. 예를 들어 두 개의 마지막 콘텐츠가 없으면 모두 오른쪽 테두리에 붙여야합니다. 그러나 마지막 픽셀의 내용이 x 픽셀을 표시해야하는 경우 5 번째 픽셀은 오른쪽 테두리에서 왼쪽으로 x 픽셀 이동해야합니다.

필자는 td 태그에 pull-right 및 pull-left 클래스를 추가하려고 시도했지만 위치에 대해서는 잘 작동하지만 행 사이의 경계가 사라져서 그 빈칸 덕분에 열 사이에 공간이 남았습니다. 행에는 모든 열에 포함되지 않은 공백이있었습니다.

나는 이것이 전혀 적합하지 않기 때문에 그러한 디자인을 할 수있는 깨끗한 방법을 찾고 있습니다. 또한 반응이 필요합니다. 아이디어 공유에 대해 미리 감사드립니다.

편집 : 여기 내 코드는, 그것은 그래서 그냥 클래스에 초점을 ERB에서, 그리고 사용자 정의 클래스와 관련된 별도의 CSS가 아니다, 그것은 단지 부트 스트랩의 :

<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

드디어 하나의 오른쪽으로 끌어 당길 필요가있는 모든 열을 병합하고 내용을 동적으로 생성했습니다. 덕분에 왼쪽에 항상 두 개의 열이 있고 오른쪽에 동적으로 채워지는 하나의 열이 있고 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>