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

Question 1

저는 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> 자바 스크립트)

Question 2

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

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

Question 3

어떤 솔루션도 나를 위해 작동하지 않습니다. 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;
        }
    }
}

Question 4

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

.table-fit {
    width: 1px;
}

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

<table class="table table-fit">

예 : JSFiddle

Question 5

w-auto 네이티브 부트 스트랩 4 클래스 를 테이블 요소에 추가 하면 테이블 이 콘텐츠에 맞을 것입니다.

Question 6

이 솔루션은 매번 좋지 않습니다. 하지만 두 개의 열만 있고 두 번째 열이 나머지 공간을 모두 차지하기를 원합니다. 이것은 나를 위해 일했습니다.

 <tr>
    <td class="text-nowrap">A</td>
    <td class="w-100">B</td>
 </tr>

Question 7

나에게도 도움이 된 것처럼 div 태그 주위에 테이블을 감쌀 수 있습니다.

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

<table>
</table>

</div>

Question 8

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<h5>Left</h5>
<table class="table table-responsive">
    <tbody>
        <tr>
            <th>Action</th>        
            <th>Name</th>
            <th>Payment Method</th>
        </tr>
        <tr>
            <td  style="width:1px; white-space:nowrap;">
                <a role="button" class="btn btn-default btn-xs" href="/Payments/View/NnrN_8tMB0CkVXt06nkrYg">View</a>
                <a role="button" class="btn btn-primary btn-xs" href="/Payments/View/NnrN_8tMB0CkVXt06nkrYg">Edit</a>
                <a role="button" class="btn btn-danger btn-xs" href="/Payments/View/NnrN_8tMB0CkVXt06nkrYg">Delete</a>                
            </td>        
            <td>Bart Foo</td>
            <td>Visa</td>
        </tr>
    </tbody>
</table>

<h5>Right</h5>

<table class="table table-responsive">
    <tbody>
        <tr>                    
            <th>Name</th>
            <th>Payment Method</th>
            <th>Action</th>            
        </tr>
        <tr>

            <td>Bart Foo</td>
            <td>Visa</td>
            <td  style="width:1px; white-space:nowrap;">
                <a role="button" class="btn btn-default btn-xs" href="/Payments/View/NnrN_8tMB0CkVXt06nkrYg">View</a>
                <a role="button" class="btn btn-primary btn-xs" href="/Payments/View/NnrN_8tMB0CkVXt06nkrYg">Edit</a>
                <a role="button" class="btn btn-danger btn-xs" href="/Payments/View/NnrN_8tMB0CkVXt06nkrYg">Delete</a>                
            </td>            
        </tr>
    </tbody>
</table>

스 니펫 확장