저는 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
답변
답변
이 솔루션은 매번 좋지 않습니다. 하지만 두 개의 열만 있고 두 번째 열이 나머지 공간을 모두 차지하기를 원합니다. 이것은 나를 위해 일했습니다.
<tr>
<td class="text-nowrap">A</td>
<td class="w-100">B</td>
</tr>
답변
나에게도 도움이 된 것처럼 div 태그 주위에 테이블을 감쌀 수 있습니다.
<div class="col-md-3">
<table>
</table>
</div>
답변
<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>