단일 테이블 셀을 고정 테이블 레이아웃으로 확장하는 방법은 무엇입니까?

Question

3 개의 열이있는 고정 너비 테이블이 있습니다. 텍스트를 기준으로 첫 번째 열의 크기를 조정하고 두 번째 열은 고정 너비로, 세 번째 열은 나머지 공간을 가져와 셀에 맞지 않는 부분을 잘라내야합니다 (text-overflow : 줄임표). 테이블은 단지 단일 행입니다.

여기

<table> 
    <tr> 
     <td>250.9</td> 
     <td> | </td> 
     <td>This is really long and should be truncated</td> 
    </tr> 
</table> 

첫번째 열은 1에서 250까지의 십진수, 하나의 소수점 정밀도 ... 내 테이블의 단순화 된 버전입니다. 두 번째 열은 첫 번째 열과 마지막 열 사이의 구분 기호입니다. 세 번째 열은 일반적으로 제공된 공간에 맞지만 매우 길 수있는 사용자가 입력 한 제목입니다. 여기

내가 해봤 것들 중 하나를 보여주는 바이올린 프로젝트입니다 : http://jsfiddle.net/A4N2z/2/

나는 또한 떠 된 div의 집합을 시도했지만, 그렇지 않은 경우 마지막 사업부는 다음 줄로 줄 바꿈 fit : http://jsfiddle.net/5Epvw/1/

누군가가 다른 접근법을 알고 있다면 그것은 단지 하나의 행이기 때문에 테이블 일 필요는 없습니다. 목표는 텍스트를 한 행에 정렬하고 특정 폭보다 더 넓지 않게하는 것입니다.

당신이 코드 블록을 사용할 수 있습니다

Answer 1

은 (내가 찾을 수있는 최고의 솔루션을) 문자를 기반으로 제목을 내가 테이블을 사용 결국

<div id="container"> 
    <div class="nbr">1.2.3</div > 
    <div class="sep"> | </div > 
    <div class="title">This is a really long title</div > 
</div> 

#container 
{ 
    width:500px; 
} 

#container div 
{ 
    display:inline-block; 
} 

Answer 2

(당신은 필요에 따라 컨테이너의 너비를 변경할 수 있습니다) 및 절단 . 값이 동적이고 Sugar의 truncate 메서드가 문자열을 자르는 방법에 대해 꽤 똑똑하기 때문에 클라이언트에서 실제 자르기를 수행하려면 Sugar.js을 사용했습니다.