2011-08-21 2 views
23

3 개의 열로 구성된 HTML 표가 있습니다. 고정 폭이 600px입니다.하나의 테이블 열이 여유 공간을 모두 채우게하려면 어떻게합니까?

<table> 
    <tr> 
    <td>Name</td> 
    <td>Qty</td> 
    <td>Actions</td> 
    </tr> 
</table> 

은 내가 수량 및 작업 열이 사용 가능한 공간의 나머지 부분을 차지하고 이름 열 (한 줄에 내용을 유지) 가능한 한 작게되고 싶어요. 수량/작업 열의 크기는 내용/글꼴 크기에 따라 달라 지므로이 경우 고정 너비가 작동하지 않습니다.

HTML/CSS에서이를 수행 할 수있는 방법이 있습니까? 아니면 Javascript를 깰 때 필요한 것입니까?

+0

nowrap을 사용해 보셨습니까? http://www.w3schools.com/tags/att_td_nowrap.asp. 속성은 더 이상 사용되지 않으므로 지정된대로 CSS와 함께 사용해야합니다. –

+0

이것은 다른 두 셀이 너비가 너무 좁지 만 좁은 것이 주된 문제를 해결하지 못합니다. 하지만 란타의 답변과 함께, 정확히 내가 뭘 찾고있어, 고마워. – gsteinert

답변

33

해당 열에 width = "99 %"를 적용 할 수 있습니다. 예 :

<table> 
    <tr> 
    <td width="99%">Name</td> 
    <td>Qty</td> 
    <td>Actions</td> 
    </tr> 
</table> 
+6

다른 셀에 nowrap을 사용하는 한 위대한 작품입니다. 나는 지금 그것을 생각하지 않기 때문에 약간 어리 석다. 감사합니다 – gsteinert

+8

너비 특성도 사용되지 않으며 CSS는 대신 사용해야합니다. http://www.w3schools.com/tags/att_td_width.asp –

+3

Firefox에서 잘 작동합니다. Webkit 브라우저에서 이것은 너비가 명시 적으로 설정되지 않은 이미지를 축소시킵니다. – Arcolye

3

최대 너비 : 99 %를 사용할 수 있습니다. 첫 번째 열에 고정 된 크기를 다른 열에 제공합니다 (필자는 픽셀 크기의 열을 사용했습니다).

<table style="width: 100%;"> 
    <tr> 
    <td style="max-width: 99%"> 
     Will max 
    </td> 
    <td style='width:110px;'> 
     fixed size here 
    </td> 
    </tr> 
</table> 
관련 문제