How to set up fixed width for <td>?
CssTwitter BootstrapWidthHtml TableCss Problem Overview
Simple scheme:
<tr class="something">
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
I need to set up a fixed width for <td>. I've tried:
tr.something {
td {
width: 90px;
}
}
Also
td.something {
width: 90px;
}
for
<td class="something">B</td>
And even
<td style="width: 90px;">B</td>
But the width of <td> is still the same.
Css Solutions
Solution 1 - Css
For Bootstrap 4.0:
In Bootstrap 4.0.0 you cannot use the col-* classes reliably (works in Firefox, but not in Chrome).
You need to use OhadR's answer:
<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>
For Bootstrap 3.0:
With twitter bootstrap 3 use: class="col-md-*" where * is a number of columns of width.
<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>
For Bootstrap 2.0:
With twitter bootstrap 2 use: class="span*" where * is a number of columns of width.
<tr class="something">
<td class="span2">A</td>
<td class="span3">B</td>
<td class="span6">C</td>
<td class="span1">D</td>
</tr>
** If you have <th> elements set the width there and not on the <td> elements.
Solution 2 - Css
I was having the same issue, I made the table fixed and then specified my td width. If you have th you can do those as well.
table {
table-layout: fixed;
word-wrap: break-word;
}
Template:
<td style="width:10%">content</td>
Please use CSS for structuring any layouts.
Solution 3 - Css
Instead of applying the col-md-* classes to each td in the row you can create a colgroup and apply the classes to the 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 here
Solution 4 - Css
Hopefully this one will help someone:
<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>
Solution 5 - Css
If you're using <table class="table"> on your table, Bootstrap's table class adds a width of 100% to the table. You need to change the width to auto.
Also, if the first row of your table is a header row, you might need to add the width to th rather than td.
Solution 6 - Css
In my case I was able to fix that issue by using min-width: 100px instead of width: 100px for the cells th or td.
.table td, .table th {
min-width: 100px;
}
Solution 7 - Css
For Bootstrap 4, you can simply use the 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>
...
Solution 8 - Css
Bootstrap 4.0
On Bootstrap 4.0, we have to declare the table rows as flex-boxes by adding class d-flex, and also drop xs, md, suffixes to allow Bootstrap to automatically derive it from the viewport.
So it will look following:
<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>
Hope this will be helpful to someone else out there!
Cheers!
Solution 9 - Css
Try this -
<style>
table { table-layout: fixed; }
table th, table td { overflow: hidden; }
</style>
Solution 10 - Css
Bootstrap 4 and 5 have a width utility for resizing html element width Example:
<tr class="w-50">
<td class="w-25">A</td>
...
</tr>
Solution 11 - Css
This combined solution worked for me, I wanted equal width columns
<style type="text/css">
table {
table-layout: fixed;
word-wrap: break-word;
}
table th, table td {
overflow: hidden;
}
</style>
Result :-
Solution 12 - Css
Ok, I just figured out where was the problem - in Bootstrap is set up as a default value width for select element, thus, the solution is:
tr. something {
td {
select {
width: 90px;
}
}
}
Anything else doesn't work me.
Solution 13 - Css
Use d-flex instead of row for "tr" in Bootstrap 4
The thing is that "row" class takes more width then the parent container, which introduces issues.
<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>
Solution 14 - Css
This is how I often do when I don't have to deal with IE
<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>
That way you can have a familiar 12-col grid.
Solution 15 - Css
Hard to judge without the context of the page html or the rest of your CSS. There might be a zillion reasons why your CSS rule is not affecting the td element.
Have you tried more specific CSS selectors such as
tr.somethingontrlevel td.something {
width: 90px;
}
This to avoid your CSS being overridden by a more specific rule from the bootstrap css.
(by the way, in your inline css sample with the style attribute, you misspelled width - that could explain why that try failed!)
Solution 16 - Css
I've been struggling with the issue for a while, so just in case when someone makes the same stupid mistake as me...
Inside the <td> I had the element with white-space:pre style applied. That made all my table/tr/td tricks discarded. When I removed that style, suddenly all my text was nicely formatted inside the td.
So, always check the main container (like table or td) but also, always check if you don't cancel your beautifull code somewhere deeper :)
Solution 17 - Css
use fixed table layout css in table, and set a percent of the td.
Solution 18 - Css
In bootstarp 4 you can use row and col-* in table, I use it as below
<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>
Solution 19 - Css
None of this work for me, and have many cols on datatable to make % or sm class equals to 12 elements layout on bootstrap.
I was working with datatables Angular 5 and Bootstrap 4, and have many cols in table. The solution for me was in the TH to add a DIV element with a specific width. For example for the cols "Person Name" and "Event date" I need a specific width, then put a div in the col header, the entire col width then resizes to the width specified from the div on the 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> ...
Solution 20 - Css
For me, setting the table's layout to auto and targeting the specific columns' <th> did the trick. I found that targeting <td> in any of the rows works as well. Feel free to throw in !important if you need to.
.table {
table-layout: auto;
}
th {
width: 10%;
}
Solution 21 - Css
use .something without td or 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>
Solution 22 - Css
in Bootstrap Table 4.x
If you are creating the table in the init parameters instead of using HTML.
You can specify the width parameters in the columns attribute:
$("table").bootstrapTable({
columns: [
{ field: "title", title: "title", width: "100px" }
]
});
Solution 23 - Css
<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>