Eenvoudig schema:
<tr class="something">
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
Ik moet een vaste breedte instellen voor <td>. Ik heb geprobeerd:
tr.something {
td {
width: 90px;
}
}
Ook
td.something {
width: 90px;
}
voor
<td class="something">B</td>
En zelfs
<td style="width: 90px;">B</td>
Maar de breedte van <td> is nog steeds hetzelfde.
Antwoord 1, autoriteit 100%
Voor Bootstrap 4.0:
In Bootstrap 4.0.0 kunt u de klassen col-* niet betrouwbaar gebruiken (werkt in Firefox, maar niet in Chrome).
U moet Antwoord van OhadR:
gebruiken
<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>
Voor Bootstrap 3.0:
Gebruik bij twitter bootstrap 3: class="col-md-*" waarbij * een aantal kolommen met een breedte is.
<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>
Voor Bootstrap 2.0:
Gebruik bij twitter bootstrap 2: class="span*" waarbij * een aantal kolommen met een breedte is.
<tr class="something">
<td class="span2">A</td>
<td class="span3">B</td>
<td class="span6">C</td>
<td class="span1">D</td>
</tr>
** Als u <th>-elementen heeft, stelt u de breedte daar in en niet op de <td>-elementen.
Antwoord 2, autoriteit 13%
Ik had hetzelfde probleem, ik heb de tabel gerepareerd en vervolgens mijn td-breedte opgegeven. Als je die hebt, kun je die ook doen.
table {
table-layout: fixed;
word-wrap: break-word;
}
Sjabloon:
<td style="width:10%">content</td>
Gebruik CSS voor het structureren van lay-outs.
Antwoord 3, autoriteit 6%
In plaats van de klassen col-md-* toe te passen op elke td in de rij, kunt u een colgroup maken en de klassen toepassen op de tag 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>
Demo hier
Antwoord 4, autoriteit 6%
Hopelijk zal deze iemand helpen:
<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
Antwoord 5, autoriteit 5%
Als u <table class="table"> op uw tafel gebruikt, voegt de tabelklasse van Bootstrap een breedte van 100% toe aan de tabel. U moet de breedte wijzigen in automatisch.
Als de eerste rij van uw tabel een koprij is, moet u mogelijk de breedte toevoegen aan th in plaats van td.
Antwoord 6, autoriteit 4%
In mijn geval kon ik dat probleem oplossen door min-width: 100px te gebruiken in plaats van width: 100px voor de cellen TH of td.
.table td, .table th {
min-width: 100px;
}
Antwoord 7, autoriteit 4%
Voor Bootstrap 4 kun je gewoon de klassenhelper gebruiken:
<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>
...
Antwoord 8, autoriteit 2%
Bootstrap 4.0
In Bootstrap 4.0 moeten we de tabelrijen declareren als flex-boxen door klasse d-flex toe te voegen, en ook xs, md, achtervoegsels laten vallen zodat Bootstrap het automatisch uit de viewport kan afleiden.
Het ziet er dus als volgt uit:
<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>
</tbody>
</table>
Ik hoop dat dit iemand anders kan helpen!
Proost!
Antwoord 9
Probeer dit –
<style>
table { table-layout: fixed; }
table th, table td { overflow: hidden; }
</style>
Antwoord 10
Deze gecombineerde oplossing werkte voor mij, ik wilde kolommen van gelijke breedte
<style type="text/css">
table {
table-layout: fixed;
word-wrap: break-word;
}
table th, table td {
overflow: hidden;
}
</style>
Resultaat:-
Antwoord 11
Ok, ik ben er net achter waar het probleem zat – in Bootstrap is ingesteld als een standaardwaarde width voor select element, dus de oplossing is:
p>
tr. something {
td {
select {
width: 90px;
}
}
}
Al het andere werkt niet bij mij.
Antwoord 12
Moeilijk te beoordelen zonder de context van de pagina-html of de rest van je CSS. Er kunnen talloze redenen zijn waarom uw CSS-regel het td-element niet beïnvloedt.
Heb je specifiekere CSS-selectors geprobeerd, zoals
tr.somethingontrlevel td.something {
width: 90px;
}
Dit om te voorkomen dat uw CSS wordt overschreven door een specifiekere regel uit de bootstrap-css.
(Trouwens, in je inline CSS-voorbeeld met het stijlkenmerk heb je de breedte verkeerd gespeld – dat zou kunnen verklaren waarom die poging mislukte!)
Antwoord 13
Ik worstel al een tijdje met het probleem, dus voor het geval iemand dezelfde stomme fout maakt als ik…
Binnen de <td> had ik het element met de stijl white-space:pre toegepast. Daardoor werden al mijn table/tr/td-trucs weggegooid. Toen ik die stijl verwijderde, was al mijn tekst ineens netjes opgemaakt in de td.
Dus, controleer altijd de hoofdcontainer (zoals table of td), maar controleer ook altijd of je je mooie code niet ergens dieper annuleert 🙂
Antwoord 14
Gebruik d-flex in plaats van rij voor “tr” in Bootstrap 4
Het punt is dat de klasse “rij” meer breedte inneemt dan de bovenliggende container, wat problemen introduceert.
<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>Antwoord 15
Dit is hoe ik het vaak doe als ik niet met IE te maken heb
<tr>
<th scope="col" style="width: calc(1 * 100% / 12)">#</th>
<th scope="col" style="width: calc(4 * 100% / 12)">Website</th>
<th scope="col" style="width: calc(3 * 100% / 12)">Username</th>
<th scope="col" style="width: calc(3 * 100% / 12)">Password</th>
<th scope="col" style="width: calc(1 * 100% / 12)">Action</th>
</tr>
Op die manier kunt u een vertrouwd raster van 12 kolommen hebben.
Antwoord 16
In bootstarp 4 kun je row en col-* in de tabel gebruiken, ik gebruik het zoals hieronder
<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>
Antwoord 17
gebruik css met vaste tabelindeling in tabel en stel een percentage van de td in.
Antwoord 18
Bootstrap 4 en 5 hebben een breedte-hulpprogramma voor het aanpassen van de breedte van html-elementen
Voorbeeld:
<tr class="w-50">
<td class="w-25">A</td>
...
</tr>
Antwoord 19
Niets van dit alles werkt voor mij, en heb veel cols op datatable om % of sm class gelijk te maken aan 12 elementen layout op bootstrap.
Ik werkte met datatables Angular 5 en Bootstrap 4, en heb veel cols in de tabel. De oplossing voor mij was in de TH om een div element met een specifieke breedte toe te voegen. Bijvoorbeeld voor de cols “Persoonsnaam” en “Gebeurtenisdatum” heb ik een specifieke breedte nodig, plaats dan een div in de col-header, de volledige col-breedte wordt dan gewijzigd in de breedte die is opgegeven in de div op de 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> ...
Antwoord 20
in Bootstrap-tabel 4.x
Als u de tabel in de init-parameters maakt in plaats van HTML te gebruiken.
U kunt de breedteparameters specificeren in het column attribuut:
$("table").bootstrapTable({
columns: [
{ field: "title", title: "title", width: "100px" }
]
});
Antwoord 21
gebruik .something zonder td of 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>Antwoord 22
<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>