[html] CSS 테이블 열 자동 너비

Program / 글쓴이

다음을 감안할 때 마지막 열의 내용 크기를 자동으로 조정하려면 어떻게해야합니까? (마지막 열은 내용에 맞게 너비를 자동으로 조정해야합니다. 축소해야하는 li 요소가 1 개 뿐이고 li 요소가 3 개인 경우 등) :

            <table cellspacing="0" cellpadding="0" border="0">
            <thead><!-- universal table heading -->
                <tr>
                    <td class="tc first"><input type="checkbox" value="true" name="data-1-check-all" id="data-1-check-all"></td>
                    <td class="tc">Type</td>
                    <th>File</th>
                    <th>Sample</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Division 1</td>
                    <td>Division 2</td>
                    <td>Division 3</td>
                    <td>Division 4</td>
                    <td>Division 5</td>
                </tr>
                <tr>
                    <td>Division 1</td>
                    <td>Division 2</td>
                    <td>Division 3</td>
                    <td>Division 4</td>
                    <td class="last">
                        <ul class="actions">
                            <li><a class="iconStats" href="#">Statystyki</a></li>
                            <li><a class="iconEdit" href="#">Edytuj</a></li>
                            <li><a class="iconDelete" href="#">Usuń</a></li>

                        </ul>
                    </td>
                </tr>
            </tbody>
        </table>

CSS :

table { table-layout: fixed; width: 100%; }
table tr { border-bottom:1px solid #e9e9e9; }
table thead td, th {border-left: 1px solid #f2f2f2; border-right: 1px solid #d5d5d5; background: #ddd url("../images/sprites4.png") repeat-x scroll 0 100% ; font-weight: bold; text-align:left;}
table tr td, th { border:1px solid #D5D5D5; padding:15px;}
table tr:hover { background:#fcfcfc;}
table tr ul.actions {margin: 0;}
table tr ul.actions li {display: inline; margin-right: 5px;}

답변

다음은 문제를 해결합니다.

td.last {
    width: 1px;
    white-space: nowrap;
}

유연한 클래스 기반 솔루션

더 유연한 솔루션은 .fitwidth클래스를 생성하고 해당 내용이 한 줄에 맞도록 원하는 모든 열에 적용하는 것입니다.

td.fitwidth {
    width: 1px;
    white-space: nowrap;
}

그리고 HTML에서 :

<tr>
    <td class="fitwidth">ID</td>
    <td>Description</td>
    <td class="fitwidth">Status</td>
    <td>Notes</td>
</tr>

답변

마지막 행이 줄 바꿈되지 않아 원하는 방식으로 크기를 조정하려면 다음을 살펴보십시오.

td {
 white-space: nowrap;
}

답변

마지막 테이블 셀을 제외한 모든 셀의 너비를 지정하고 테이블 레이아웃 : 고정 및 너비를 테이블에 추가 할 수 있습니다.

당신은 설정할 수 있습니다

table tr ul.actions {margin: 0; white-space:nowrap;}

(또는 Sander가 대신 제안한대로 마지막 TD에 대해 이것을 설정합니다).

이렇게하면 인라인 LI가 중단되지 않습니다. 불행히도 이것은 포함하는 UL (및이 상위 TD)에서 새로운 너비 계산으로 이어지지 않으므로 마지막 TD의 크기를 자동으로 조정하지 않습니다.

즉, 인라인 요소에 지정된 너비가 없으면 TD의 너비가 항상 먼저 자동으로 계산됩니다 (지정되지 않은 경우). 그런 다음 이 계산 된 너비의 인라인 콘텐츠가 렌더링되고 white-space-property가 적용되어 해당 콘텐츠가 계산 된 경계를 넘어 확장됩니다.

그래서 특정 너비를 가진 마지막 TD 내에 요소가 없으면 불가능하다고 생각 합니다.

답변

다음과 같이 자동 및 최소 또는 최대 너비를 사용하십시오.

td {
max-width:50px;
width:auto;
min-width:10px;
}

답변