유동 표를 줄임표와 함께 사용하려면 어떻게해야합니까?

Question

두 열이있는 표가 있다고 가정 해 봅시다. 오른쪽 열 너비를 표 셀 내의 내용 크기로, 왼쪽 열 너비를 가능한 넓게하고 싶습니다. 또한 줄 바꿈 및 줄임표 표시를하지 않을 왼쪽 열을 원합니다.

여기 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 표 레이아웃을 제거하면 다음과 같이 고정됩니다. 줄임표가 예상대로 작동하지 않습니다.

유액 테이블을 생략 기호와 함께 사용하려면 어떻게합니까?

Answer 1

내가 한 것은 내부 블록으로 스타일 지정된 단락 요소를 추가하는 것이 었습니다. 그런 다음 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> 

에서 내 솔루션을 찾을 수 있습니다