고정 너비를 설정하는 방법은 무엇입니까?
간단한 계획 :
<tr class="something">
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
에 대해 고정 너비를 설정해야합니다 <td>. 난 노력 했어:
tr.something {
td {
width: 90px;
}
}
또한
td.something {
width: 90px;
}
...에 대한
<td class="something">B</td>
그리고 심지어
<td style="width: 90px;">B</td>
그러나 너비 <td>는 여전히 동일합니다.
Bootstrap 4.0의 경우 :
Bootstrap 4.0.0에서는 col-*클래스를 안정적으로 사용할 수 없습니다 (Firefox에서는 작동하지만 Chrome에서는 작동하지 않음). OhadR의 대답 을 사용해야합니다 .
<tr>
<th style="width: 16.66%">Col 1</th>
<th style="width: 25%">Col 2</th>
<th style="width: 50%">Col 4</th>
<th style="width: 8.33%">Col 5</th>
</tr>
Bootstrap 3.0의 경우 :
트위터 부트 스트랩 3 사용 : class="col-md-*"여기서 *는 너비의 열 수입니다.
<tr class="something">
<td class="col-md-2">A</td>
<td class="col-md-3">B</td>
<td class="col-md-6">C</td>
<td class="col-md-1">D</td>
</tr>
Bootstrap 2.0의 경우 :
트위터 부트 스트랩 2 사용 : class="span*"여기서 *는 너비의 열 수입니다.
<tr class="something">
<td class="span2">A</td>
<td class="span3">B</td>
<td class="span6">C</td>
<td class="span1">D</td>
</tr>
** <th>요소 가있는 경우 요소가 아닌 너비를 설정합니다 <td>.
같은 문제가 발생하여 테이블을 고정한 다음 td 너비를 지정했습니다. 당신이 th를 가지고 있다면 당신도 할 수 있습니다.
table {
table-layout: fixed;
word-wrap: break-word;
}
주형:
<td style="width:10%">content</td>
레이아웃을 구성하려면 CSS를 사용하십시오.
행의 col-md-*각 클래스에 클래스를 적용하는 대신을 td만들고 태그에 colgroup클래스를 적용 할 수 있습니다 col.
<table class="table table-striped">
<colgroup>
<col class="col-md-4">
<col class="col-md-7">
</colgroup>
<tbody>
<tr>
<td>Title</td>
<td>Long Value</td>
</tr>
</tbody>
</table>
여기에서 데모
<table class="table">테이블에서 사용 하는 경우 Bootstrap의 테이블 클래스는 테이블에 100 % 너비를 추가합니다. 너비를 자동으로 변경해야합니다.
또한 테이블의 첫 번째 행이 헤더 행인 경우 td가 아닌 th에 너비를 추가해야 할 수 있습니다.
바라건대 이것은 누군가를 도울 것입니다.
<table class="table">
<thead>
<tr>
<th style="width: 30%">Col 1</th>
<th style="width: 20%">Col 2</th>
<th style="width: 10%">Col 3</th>
<th style="width: 30%">Col 4</th>
<th style="width: 10%">Col 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Val 1</td>
<td>Val 2</td>
<td>Val 3</td>
<td>Val 4</td>
<td>Val 5</td>
</tr>
</tbody>
</table>
https://github.com/twbs/bootstrap/issues/863
내 경우에는 내가 사용하여 해당 문제를 해결할 수 있었다 min-width: 100px대신 width: 100px세포에 대한 th나 td.
.table td, .table th {
min-width: 100px;
}
Bootstrap 4의 경우 클래스 도우미를 사용하면됩니다.
<table class="table">
<thead>
<tr>
<td class="w-25">Col 1</td>
<td class="w-25">Col 2</td>
<td class="w-25">Col 3</td>
<td class="w-25">Col 4</td>
</tr>
</thead>
<tbody>
<tr>
...
이 시도 -
<style>
table { table-layout: fixed; }
table th, table td { overflow: hidden; }
</style>
이 결합 솔루션은 저에게 효과적이었습니다.
<style type="text/css">
table {
table-layout: fixed;
word-wrap: break-word;
}
table th, table td {
overflow: hidden;
}
</style>
결과 :-
부트 스트랩 4.0
Bootstrap 4.0에서는 d-flex 클래스를 추가하여 테이블 행을 플렉스 박스로 선언하고 부트 스트랩이 뷰포트에서 자동으로 파생 할 수 있도록 xs, md, 접미사도 삭제해야합니다.
따라서 다음과 같이 보일 것입니다.
<table class="table">
<thead>
<tr class="d-flex">
<th class="col-2"> Student No. </th>
<th class="col-7"> Description </th>
<th class="col-3"> Amount </th>
</tr>
</thead>
<tbody>
<tr class="d-flex">
<td class="col-2">test</td>
<td class="col-7">Name here</td>
<td class="col-3">Amount Here </td>
</tr>
</table>
이것이 다른 누군가에게 도움이되기를 바랍니다!
건배!
문제가 어디에 좋아, 난 그냥 알아 냈어 - 부트 스트랩에 기본값으로 설정 width을위한 select요소, 따라서 해결책은 다음과 같습니다
tr. something {
td {
select {
width: 90px;
}
}
}
다른 것은 나를 작동하지 않습니다.
페이지 html 또는 나머지 CSS의 컨텍스트없이 판단하기 어렵습니다. CSS 규칙이 td 요소에 영향을주지 않는 이유는 무수히 많습니다.
다음과 같은보다 구체적인 CSS 선택기를 사용해 보셨습니까?
tr.somethingontrlevel td.something {
width: 90px;
}
이는 부트 스트랩 CSS의보다 구체적인 규칙에 의해 CSS가 재정의되는 것을 방지하기위한 것입니다.
(그런데 스타일 속성이있는 인라인 CSS 샘플에서 너비를 잘못 입력 했으므로 시도가 실패한 이유를 설명 할 수 있습니다!)
나는 한동안 문제로 고생 해 왔기 때문에 누군가 나와 같은 어리석은 실수를 할 경우를 대비하여 ... 내부에는 스타일이 적용된 <td>요소가 white-space:pre있습니다. 그것은 내 모든 테이블 / tr / td 트릭을 버렸습니다. 이 스타일을 제거했을 때 갑자기 모든 텍스트가 td.
따라서 항상 주 컨테이너 ( table또는 등 td)를 확인하고 더 깊은 곳에서 beautifull 코드를 취소하지 않는지 항상 확인하십시오. :)
td 또는 th 없이 .something 사용
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.something {
width: 90px;
background: red;
}
</style>
</head>
<body>
<div class="container">
<h2>Fixed width column</h2>
<table class="table table-bordered">
<thead>
<tr>
<th class="something">Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>이 중 어느 것도 나를 위해 작동하지 않으며 % 또는 sm 클래스를 부트 스트랩의 12 요소 레이아웃과 동일하게 만들기 위해 datatable에 많은 열이 있습니다.
나는 datatables Angular 5와 Bootstrap 4로 작업하고 있었고 테이블에 많은 열이 있습니다. 나를위한 해결책 은 특정 너비 TH의 DIV요소 를 추가하는 것 입니다. 예를 들어 "Person Name"및 "Event date" div열의 경우 특정 너비가 필요 하고 열 헤더 에 a를 입력 하면 전체 열 너비가 div에서 지정한 너비로 조정됩니다 TH.
<table datatable [dtOptions]="dtOptions" *ngIf="listData" class="table table-hover table-sm table-bordered text-center display" width="100%">
<thead class="thead-dark">
<tr>
<th scope="col">ID </th>
<th scope="col">Value</th>
<th scope="col"><div style="width: 600px;">Person Name</div></th>
<th scope="col"><div style="width: 800px;">Event date</div></th> ...
<div class="row" id="divcashgap" style="display:none">
<div class="col-md-12">
<div class="table-responsive">
<table class="table table-default" id="gvcashgapp">
<thead>
<tr>
<th class="1">BranchCode</th>
<th class="2"><a>TC</a></th>
<th class="3">VourNo</th>
<th class="4" style="min-width:120px;">VourDate</th>
<th class="5" style="min-width:120px;">RCPT Date</th>
<th class="6">RCPT No</th>
<th class="7"><a>PIS No</a></th>
<th class="8" style="min-width:160px;">RCPT Ammount</th>
<th class="9">Agging</th>
<th class="10" style="min-width:160px;">DesPosition Days</th>
<th class="11" style="min-width:150px;">Bank Credit Date</th>
<th class="12">Comments</th>
<th class="13" style="min-width:150px;">BAC Comment</th>
<th class="14">BAC Ramark</th>
<th class="15" style="min-width:150px;">RAC Comment</th>
<th class="16">RAC Ramark</th>
<th class="17" style="min-width:120px;">Update Status</th>
</tr>
</thead>
<tbody id="tbdCashGapp"></tbody>
</table>
</div>
</div>
</div>Bootstrap 4에서 "tr"에 대해 행 대신 d-flex 사용
문제는 "row"클래스가 부모 컨테이너보다 더 많은 너비를 차지하므로 문제가 발생합니다.
<table class="table">
<tbody>
<tr class="d-flex">
<td class="col-sm-8">Hello</td>
<td class="col-sm-4">World</td>
</tr>
<tr class="d-flex">
<td class="col-sm-8">8 columns</td>
<td class="col-sm-4">4 columns</td>
</tr>
</tbody>
</table>참조 URL : https://stackoverflow.com/questions/15115052/how-to-set-up-fixed-width-for-td
'IT story' 카테고리의 다른 글
| HTML을 JSON에 매핑 (0) | 2020.12.25 |
|---|---|
| 파이썬 정수를 이진 문자열로? (0) | 2020.12.23 |
| 개인 바이트, 가상 바이트, 작업 집합이란 무엇입니까? (0) | 2020.12.23 |
| .gitignore를 Git 저장소에 커밋해야합니까? (0) | 2020.12.23 |
| .idea 폴더에서 무엇을 gitignore? (0) | 2020.12.23 |