Skema sederhana:
<tr class="something">
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
Saya perlu untuk mengatur lebar tetap untuk <td>
. I've mencoba:
tr.something {
td {
width: 90px;
}
}
Juga
td.something {
width: 90px;
}
untuk
<td class="something">B</td>
Dan bahkan
<td style="width: 90px;">B</td>
Tapi lebar <td>
masih sama.
Di Bootstrap 4.0.0 anda tidak dapat menggunakan col-*
kelas andal (bekerja di Firefox, tapi tidak di Chrome).
Anda perlu menggunakan OhadR's jawaban:
<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>
Dengan twitter bootstrap 3 menggunakan: class="col-md-*"
mana * adalah jumlah kolom lebar.
<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>
Dengan twitter bootstrap 2 menggunakan: class="span*"
mana * adalah jumlah kolom lebar.
<tr class="something">
<td class="span2">A</td>
<td class="span3">B</td>
<td class="span6">C</td>
<td class="span1">D</td>
</tr>
** Jika anda memiliki <th>
unsur-unsur mengatur lebar ada dan bukan pada <td>
elemen.
Saya sedang mengalami masalah yang sama, saya membuat tabel tetap dan kemudian ditentukan saya td width. Jika anda memiliki th yang dapat anda lakukan mereka juga.
table {
table-layout: fixed;
word-wrap: break-word;
}
Template:
<td style="width:10%">content</td>
Silakan gunakan CSS untuk mengatur layout.
Alih-alih menerapkan col-md-*
kelas untuk masing-masing td
di baris anda dapat membuat colgroup
dan menerapkan di kelas untuk col
tag.
<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>
Demo di sini
Jika anda're menggunakan <table class="table">
di meja anda, Bootstrap's tabel kelas menambah lebar dari 100% ke meja. Anda perlu untuk mengubah lebar untuk auto.
Juga, jika baris pertama dari tabel header baris, anda mungkin perlu menambahkan lebar untuk th daripada td.
Mudah-mudahan ini akan membantu seseorang:
<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>
Untuk Bootstrap 4, anda hanya dapat menggunakan class helper:
<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>
...
Pada Bootstrap 4.0, kita harus menyatakan baris tabel sebagai flex-kotak dengan menambahkan kelas d-flex, dan juga drop xs, md, akhiran untuk memungkinkan Bootstrap untuk secara otomatis berasal dari viewport.
Sehingga akan terlihat sebagai berikut:
<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>
Semoga ini akan bermanfaat untuk orang lain di luar sana!
Cheers!
Sulit untuk menilai tanpa konteks dari halaman html atau sisa CSS anda. Mungkin ada banyak alasan mengapa anda CSS aturan ini tidak mempengaruhi td elemen.
Apakah anda mencoba lebih spesifik CSS seperti
tr.somethingontrlevel td.something {
width: 90px;
}
Ini untuk menghindari CSS anda sedang diganti oleh yang lebih spesifik aturan dari bootstrap css.
(by the way, di inline css sampel dengan atribut style, anda salah eja lebar - yang bisa menjelaskan mengapa yang mencoba gagal!)
I've telah berjuang dengan masalah ini untuk sementara waktu, jadi hanya dalam kasus ketika seseorang membuat beberapa kesalahan bodoh seperti saya...
Dalam <td>
saya memiliki elemen dengan white-space:pre
gaya diterapkan. Yang membuat semua meja saya/tr/td trik dibuang. Ketika saya dihapus gaya itu, tiba-tiba semua teks yang telah diformat dalam td
.
Jadi, selalu memeriksa wadah utama (seperti meja
atau td
), tetapi juga, selalu periksa jika anda don't membatalkan beautifull kode di tempat yang lebih dalam :)
Menggunakan d-flex bukannya turut untuk "tr" di Bootstrap 4
Masalahnya adalah bahwa "baris" kelas memakan waktu lebih lebar maka wadah induk, yang memperkenalkan isu-isu.
<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>
menggunakan .sesuatu tanpa td atau th
<!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>[email protected]</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>[email protected]</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Ini tidak bekerja untuk saya, dan telah banyak cols pada datatable untuk membuat % atau sm kelas sama dengan 12 unsur-unsur tata letak pada bootstrap.
Saya bekerja dengan datatables Sudut 5 dan Bootstrap 4, dan memiliki banyak cols di meja. Solusi untuk saya berada di TH
untuk menambahkan DIV
elemen dengan lebar tertentu. Misalnya untuk cols "Orang Nama" dan "tanggal Acara" saya perlu lebar tertentu, kemudian menempatkan div
di col header, seluruh col width kemudian mengubah ukuran dengan lebar yang ditentukan dari div pada 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> ...
Di bootstarp 4 anda dapat menggunakan baris
dan col-*
di meja, saya gunakan seperti di bawah ini
<table class="table">
<thead>
<tr class="row">
<th class="col-sm-3">3 row</th>
<th class="col-sm-4">4 row</th>
<th class="col-sm-5">5 row</th>
</tr>
</thead>
<tbody>
<tr class="row">
<td class="col-sm-3">some text</td>
<td class="col-sm-4">some text</td>
<td class="col-sm-5">some text</td>
</tr>
</tbody>
</table>
<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>