CSS 테이블 열 자동 너비

CSS 테이블 열 자동 너비

---

다음을 감안할 때 마지막 열의 내용 크기를 자동으로 조정하려면 어떻게해야합니까? (마지막 열은 내용에 맞게 너비를 자동 조정해야합니다. 축소해야하는 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에 대해 이것을 설정합니다).

This forces the inline-LIs not to break. Unfortunately this does not lead to a new width calculation in the containing UL (and this parent TD), and therefore does not autosize the last TD.

This means: if an inline element has no given width, a TD's width is always computed automatically first (if not specified). Then its inline content with this calculated width gets rendered and the white-space-property is applied, stretching its content beyond the calculated boundaries.

So I guess it's not possible without having an element within the last TD with a specific width.

---

use auto and min or max width like this:

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

참고URL : https://stackoverflow.com/questions/4757844/css-table-column-autowidth