模仿智能手機表與響應式設計

Question

我有一個表與n列，我使用bootstrap的設計。

我想要做的就是把左邊的td堆放在左邊和右邊的堆疊在右邊（使用按鈕或複選框等居中元素，並將最小值寬度）。在中間，我希望其他td在中間，一個在另一個下方沒有填充或邊距。

這裏是什麼，我需要一個例證：

我成功地這樣做渲染的中間部分：

tr { 
    border-top: 1px solid #eceeef; 
} 
td { 
    padding:0px !important; 
    padding-left:20px !important; 
    border-top: none !important; 
    width:100% !important; 
    display: block; 
} 

我有麻煩讓我的左級和我的權利班級工作...我試圖使用float:left但問題是，它不佔用整個高度，並且它不是第一個td時不起作用。我也嘗試了inline-block只爲邊班，但它佔據了大部分的寬度，我不能堆疊起來（像綠色區域）。

任何建議將不勝感激！

編輯： 這裏是一個plunker（需要與寬度玩看到響應式設計）

這裏是我的PUG代碼：

.table-responsive 
    table.table.table-striped 
     tbody 
      tr 
       td.left-class 
        input(type='checkbox') 
       td test 
       td test 
       td test 
       td test 
       td test 
       td.right-class 
        button click1 
       td.right-class 
        button click2 

Answer 1

這裏有一個jsfiddle

我能夠做到這一點只與jQuery的，因爲某些原因，當我從CSS添加這種風格它不起作用，但這個我認爲將解決您的問題

$('.right-class').css('display','block');