Bootstrap 테이블 열을 콘텐츠에 맞게 만들기

Bootstrap 테이블 열을 콘텐츠에 맞게 만들기

---

저는 Bootstrap을 사용하고 있으며 테이블을 그리고 있습니다. 맨 오른쪽 열에는 버튼이 있으며 해당 버튼에 맞는 최소 크기로 드롭 다운하고 싶습니다.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<table class="table table-responsive">
        <tbody>
            <tr>
                <th>Name</th>
                <th>Payment Method</th>
                <th></th>
            </tr>
            <tr>
                <td>Bart Foo</td>
                <td>Visa</td>
                <td><a role="button" class="btn btn-default btn-xs" href="/Payments/View/NnrN_8tMB0CkVXt06nkrYg">View</a></td>
            </tr>
        </tbody>
    </table>

이것은 다음과 같이 렌더링됩니다.

일부 방화범 강조 표시로 열 너비가 다음과 같이 넓어졌습니다.

해당 열은 페이지에 따라 크기가 조정되는 반면 페이지는 더 큰 동적 너비 모드에 있습니다. 순수 CSS에서이 문제를 해결하는 방법을 알고 있지만 대부분의 접근 방식은 사이트의 낮은 너비 버전에서 문제를 일으킬 수 있습니다.

해당 열을 내용의 너비로 어떻게 드롭 다운 할 수 있습니까?

(예전처럼-기존 부트 스트랩 클래스> 순수 CSS> 자바 스크립트)

---

내용에 맞게 표 셀 너비에 맞는 클래스 만들기

.table td.fit, 
.table th.fit {
    white-space: nowrap;
    width: 1%;
}

---

어떤 솔루션도 나를 위해 작동하지 않습니다. td마지막 열은 여전히 전체 폭이 걸립니다. 그래서 여기에 해결책이 있습니다. 부트 스트랩 4에서 테스트 됨

추가 table-fit로table

table.table-fit {
    width: auto !important;
    table-layout: auto !important;
}
table.table-fit thead th, table.table-fit tfoot th {
    width: auto !important;
}
table.table-fit tbody td, table.table-fit tfoot td {
    width: auto !important;
}

다음은 sass사용을 위한 것 입니다.

@mixin width {
    width: auto !important;
}

table {
    &.table-fit {
        @include width;
        table-layout: auto !important;
        thead th, tfoot th  {
            @include width;
        }
        tbody td, tfoot td {
            @include width;
        }
    }
}

---

일종의 오래된 질문이지만 나는 이것을 찾고 여기에 도착했습니다. 나는 테이블이 내용에 맞게 가능한 한 작기를 원했습니다. 해결책은 단순히 테이블 너비를 임의의 작은 숫자 (예 : 1px)로 설정하는 것입니다. 처리하기 위해 CSS 클래스도 만들었습니다.

.table-fit {
    width: 1px;
}

다음과 같이 사용하십시오.

<table class="table table-fit">

예 : JSFiddle

---

나도 도움이 되었기 때문에 이와 같이 div 태그 주위에 테이블을 감쌀 수 있습니다.

<div class="col-md-3">

<table>
</table>

</div>

참고 URL : https://stackoverflow.com/questions/31184000/making-a-bootstrap-table-column-fit-to-content