Einfaches Schema:
<tr class="something">
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>Ich muss eine feste Breite einrichten für <td> . Ich habe es versucht:
tr.something {
td {
width: 90px;
}
}Auch
td.something {
width: 90px;
}für
<td class="something">B</td>Und selbst
<td style="width: 90px;">B</td>Aber die Breite der <td> ist immer noch derselbe.
Keine dieser Arbeit für mich, und haben viele Spalten auf datatable zu machen, % oder sm Klasse gleich 12 Elemente Layout auf Bootstrap.
Ich war mit Datentabellen Angular 5 und Bootstrap 4 arbeiten, und haben viele Spalten in der Tabelle. Die Lösung für mich war in der TH zum Hinzufügen einer DIV Element mit einer bestimmten Breite. Zum Beispiel für die Spalten "Name der Person" und "Datum des Ereignisses" brauche ich eine bestimmte Breite, dann setzen Sie eine div in der Spaltenüberschrift, wird die gesamte Spaltenbreite an die Breite angepasst, die im div auf der Seite 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> ...
Ich habe das Layout der Tabelle auf "Auto" gesetzt und die einzelnen Spalten auf die <th> hat den Zweck erfüllt. Ich fand heraus, dass die Ausrichtung auf <td> in einer der Zeilen funktioniert ebenfalls. Fühlen Sie sich frei zu werfen in !important wenn Sie es müssen.
.table {
table-layout: auto;
}
th {
width: 10%;
}
Verwenden. .etwas ohne td ou 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>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>
<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> CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.
