2013-10-05 49 views
0

假設我有一個有兩列的表格,我希望右列寬度是表格單元格內容的大小,左列寬度儘可能寬。我還想讓左欄不要換行並顯示省略號。如何獲得流體表格以使用省略號?

我已經在這裏創造http://jsfiddle.net/fTd8m/

<style type="text/css"> 
.parent{ 
    display:table; 
    table-layout:fixed; 
    width:100%; 
} 
.left-column{ 
    display:table-cell; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space:nowrap; 
} 
.right-column{ 
    text-align:right; 
    display:table-cell; 
} 
</style> 

<div class="parent"> 
    <div class="left-column"> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
    </div> 
    <div class="right-column"> 
     Right Column 
    </div> 
</div> 

我有越來越左欄是在儘可能廣泛的問題的jsfiddle例子。 如果我刪除了css table-layout:fixed;省略號不能按預期工作。

我該如何獲得流體表格以使用省略號?

回答

0

我所做的是添加一個帶有內部塊的樣式的段落元素。然後我使用jQuery遍歷右列中所有元素,測量它們的最大寬度。然後我將最大寬度分配給列。

你可以找到我的這個鏈接的jsfiddle http://jsfiddle.net/jvgRV/

<script type="text/javascript"> 
$(function() { 
    var maxWidth = 0; 
    //go through each paragraph in the right column and find the widest value. 
    $(".innerParagraph").each(function() { 
     if(maxWidth < $(this).width()){ 
      maxWidth = $(this).width(); 
     } 
    }); 
    // assign max width to column 
    $(".right-column").width(maxWidth); 
}); 
</script> 

<style type="text/css"> 
.table{ 
    display:table; 
    table-layout:fixed; 
    width:100%; 
} 
.row{ 
    display:table-row; 
} 
.left-column{ 
    display:table-cell; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space:nowrap; 
} 
.right-column{ 
    text-align:right; 
    display:table-cell; 
} 
.innerParagraph{ 
    display:inline-block; 
} 
</style> 

<div class="table"> 
    <div class="row"> 
     <div class="left-column"> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
     </div> 
     <div class="right-column"> 
      <p class="innerParagraph">Right Column</p> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="left-column"> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
     </div> 
     <div class="right-column"> 
      <p class="innerParagraph">Right Column wider</p> 
     </div> 
    </div> 
</div> 
下的解決方案