How to Set Up Fixed Width For ≪Td≫

How to set up fixed width for td ?

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.

Fixed Table Cell Width

You could try using the <col> tag manage table styling for all rows but you will need to set the table-layout:fixed style on the <table> or the tables css class and set the overflow style for the cells

http://www.w3schools.com/TAGS/tag_col.asp

<table class="fixed">
    <col width="20px" />
    <col width="30px" />
    <col width="40px" />
    <tr>
        <td>text</td>
        <td>text</td>
        <td>text</td>
    </tr>
</table>

and this be your CSS

table.fixed { table-layout:fixed; }
table.fixed td { overflow: hidden; }

CSS table td width - fixed, not flexible

It's not the prettiest CSS, but I got this to work:

table td {
    width: 30px;
    overflow: hidden;
    display: inline-block;
    white-space: nowrap;
}

Examples, with and without ellipses:

body {    font-size: 12px;    font-family: Tahoma, Helvetica, sans-serif;}
table {    border: 1px solid #555;    border-width: 0 0 1px 1px;}table td {    border: 1px solid #555;    border-width: 1px 1px 0 0;}
/* What you need: */table td {    width: 30px;    overflow: hidden;    display: inline-block;    white-space: nowrap;}
table.with-ellipsis td {       text-overflow: ellipsis;}

<table cellpadding="2" cellspacing="0">    <tr>        <td>first</td><td>second</td><td>third</td><td>forth</td>    </tr>    <tr>        <td>first</td><td>this is really long</td><td>third</td><td>forth</td>    </tr></table>
<br />
<table class="with-ellipsis" cellpadding="2" cellspacing="0">    <tr>        <td>first</td><td>second</td><td>third</td><td>forth</td>    </tr>    <tr>        <td>first</td><td>this is really long</td><td>third</td><td>forth</td>    </tr></table>

Fixed width for table first column

The width property for DIV & TABLE works differently.

Use max-width & min-width to achieve the results you want:

thead tr th:first-child,
tbody tr td:first-child {
  width: 8em;
  min-width: 8em;
  max-width: 8em;
  word-break: break-all;
}

Edit:

(Editing the answer clarify the working of width in HTML, please point out if I got something wrong or missed anything!)

In divs the width property is used to define the size of the element and the content is fitted in accordingly, irrespective of parent and sibling width.

But in the case of a table, the size of an element is calculated according to content, and the width property gets a lower priority. Even sibling size is taken into consideration. Thus we have to use additional properties, like min-width and max-width to force the size we want!

html table columns of fixed width

You need to add
.table{
table-layout:fixed;} and .table tr td{
word-wrap:break-word;
text-align:center;} for applying width and text as per width

.table{table-layout:fixed;}.table tr td{word-wrap:break-word;text-align:center;}

<table width="100%" cellspacing="1" cellpadding="2" align="center" border="0" class="table"><tr>    <td width="7%">ew</td>    <td width="21%">ewwe</td>    <td width="32%">weew</td>    <td width="20%">ewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewewew</td>    <td width="20%">eweweew</td></tr></table>

Force table column widths to always be fixed regardless of contents

Specify the width of the table:

table
{
    table-layout: fixed;
    width: 100px;
}

See jsFiddle

td widths, not working?

It should be:

<td width="200">

<td style="width: 200px">

Note that if your cell contains some content that doesn't fit into the 200px (like somelongwordwithoutanyspaces), the cell will stretch nevertheless, unless your CSS contains table-layout: fixed for the table.

EDIT

As kristina childs noted on her answer, you should avoid both the width attribute and using inline CSS (with the style attribute). It's a good practice to separate style and structure as much as possible.

How to Set Up Fixed Width For ≪Td≫