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; }

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.

Set the table column width constant regardless of the amount of text in its cells?

I played with it for a bit because I had trouble figuring it out.

You need to set the cell width (either th or td worked, I set both) AND set the table-layout to fixed. For some reason, the cell width seems to only stay fixed if the table width is set, too (I think that's silly but whatev).

Also, it is useful to set the overflow property to hidden to prevent any extra text from coming out of the table.

You should make sure to leave all of the bordering and sizing for CSS, too.

Ok so here's what I have:

table {  border: 1px solid black;  table-layout: fixed;  width: 200px;}
th,td {  border: 1px solid black;  width: 100px;  overflow: hidden;}

<table>  <tr>    <th>header 1</th>    <th>header 234567895678657</th>  </tr>  <tr>    <td>data asdfasdfasdfasdfasdf</td>    <td>data 2</td>  </tr></table>

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

Setting table column width

<table style="width: 100%">    <colgroup>       <col span="1" style="width: 15%;">       <col span="1" style="width: 70%;">       <col span="1" style="width: 15%;">    </colgroup>                <!-- Put <thead>, <tbody>, and <tr>'s here! -->    <tbody>        <tr>            <td style="background-color: #777">15%</td>            <td style="background-color: #aaa">70%</td>            <td style="background-color: #777">15%</td>        </tr>    </tbody></table>

Fixed table layout, with controlled column widths that scales

I am not sure how standardized using grid-css on table-tags are, but it works better toward the desired result than all normal table-display-examples I have attempted. Any thoughts on this solution? Browser support etc..

table {
  display: grid;
  grid-template-columns: minmax(30px, 100px) minmax(30px, 1fr) minmax(30px, 1fr) minmax(30px, 200px) minmax(30px, 200px);
}

Full example: https://jsfiddle.net/fhcz51u7/

Set the table column width 100% with table-layout fixed?

You can downsize the font or restructure your table :

examples :
font-size to screenwidth via calc(10px + 0.5vw) (reset those values to your needs if used).

table {  width: 100%;  table-layout: fixed;  font-size: calc(10px + 0.5vw);}input {  max-width: 100%;  box-sizing: border-box;}input:focus {  position: absolute;  max-width: auto;  background: lightgray;}th,td {  border: 1px solid;  width: max-content;  text-align: center;}thead td {  text-align: left;  vertical-align: top;}tbody {  counter-reset: trs;}tbody tr {  counter-increment: trs;}tbody tr td:first-child::before {  content: 'N° 'counter(trs);}td.fa {display:table-cell;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/><table>  <thead>    <tr>      <th>N.</th>      <th><b class="fa fa-wrench"></b></th>              <th><b class="fa fa-certificate"></b></th>            <th><b class="fa fa-user-tie"></b></th>            <th>IP</th>            <th><b class="fa fa-link"></b></th>            <th><b class="fa fa-door-open"></b></th>            <th><b class="fa fa-server"></b></th>            <th><b class="fa fa-user-circle"></b></th>            <th><b class="fa fa-key"></b></th>            <th><b class="fa fa-dice-d20"></b></th>            <th><b class="fa fa-wrench"></b></th>            <th><b class="fa fa-file-alt"></b></th>      <th>$dat</th>      <th>$scodiceutum</th>        </tr>    <tr>       <td></td>      <td></td>      <td></td>      <td><input type=search placeholder="🔍"/></td>      <td><input type=search placeholder="🔍"/></td>      <td><input type=search placeholder="🔍"/></td>      <td><input type=search placeholder="🔍"/></td>      <td><input type=search placeholder="🔍"/></td>      <td><input type=search placeholder="🔍"/></td>      <td><input type=search placeholder="🔍"/></td>      <td><input type=search placeholder="🔍"/></td>      <td><input type=search placeholder="🔍"/></td>      <td><input type=search placeholder="🔍"/></td>      <td><input type=search placeholder="🔍"/></td>      <td><input type=search placeholder="🔍"/></td>    </tr>    </thead>  <tbody>    <tr>           <td class="fa"></td>      <td class=" fa wrench">        <b class="fa fa-pencil-alt green"></b>        <b class="fa fa-trash-alt red"></b>              </td>      <td class="fa certificate">cell</td>      <td class="fa user-tie"> cell</td>      <td class="fa IP">cell</td>      <td class="fa link">cell</td>      <td class="fa door-open">cell</td>      <td class="fa server">cell</td>      <td class="fa user-circle">cell</td>      <td class="fa key">cell</td>      <td class="fa dice-d20">cell</td>      <td class="fa wrench">cell</td>      <td class="fa file-alt">cell</td>      <td class="fa data">cell</td>      <td class="fa codice">cell</td>    </tr>    <tr>           <td class="fa"></td>      <td class=" fa wrench">        <b class="fa fa-pencil-alt green"></b>        <b class="fa fa-trash-alt red"></b>              </td>      <td class="fa certificate">cell</td>      <td class="fa user-tie"> cell</td>      <td class="fa IP">cell</td>      <td class="fa link">cell</td>      <td class="fa door-open">cell</td>      <td class="fa server">cell</td>      <td class="fa user-circle">cell</td>      <td class="fa key">cell</td>      <td class="fa dice-d20">cell</td>      <td class="fa wrench">cell</td>      <td class="fa file-alt">cell</td>      <td class="fa data">cell</td>      <td class="fa codice">cell</td>    </tr>     <tr>          <td class="fa"></td>      <td class=" fa wrench">        <b class="fa fa-pencil-alt green"></b>        <b class="fa fa-trash-alt red"></b>              </td>      <td class="fa certificate">cell</td>      <td class="fa user-tie"> cell</td>      <td class="fa IP">cell</td>      <td class="fa link">cell</td>      <td class="fa door-open">cell</td>      <td class="fa server">cell</td>      <td class="fa user-circle">cell</td>      <td class="fa key">cell</td>      <td class="fa dice-d20">cell</td>      <td class="fa wrench">cell</td>      <td class="fa file-alt">cell</td>      <td class="fa data">cell</td>      <td class="fa codice">cell</td>    </tr>    <tr>           <td class="fa"></td>      <td class=" fa wrench">        <b class="fa fa-pencil-alt green"></b>        <b class="fa fa-trash-alt red"></b>              </td>      <td class="fa certificate">cell</td>      <td class="fa user-tie"> cell</td>      <td class="fa IP">cell</td>      <td class="fa link">cell</td>      <td class="fa door-open">cell</td>      <td class="fa server">cell</td>      <td class="fa user-circle">cell</td>      <td class="fa key">cell</td>      <td class="fa dice-d20">cell</td>      <td class="fa wrench">cell</td>      <td class="fa file-alt">cell</td>      <td class="fa data">cell</td>      <td class="fa codice">cell</td>    </tr>    <tr>          <td class="fa"></td>      <td class=" fa wrench">        <b class="fa fa-pencil-alt green"></b>        <b class="fa fa-trash-alt red"></b>              </td>      <td class="fa certificate">cell</td>      <td class="fa user-tie"> cell</td>      <td class="fa IP">cell</td>      <td class="fa link">cell</td>      <td class="fa door-open">cell</td>      <td class="fa server">cell</td>      <td class="fa user-circle">cell</td>      <td class="fa key">cell</td>      <td class="fa dice-d20">cell</td>      <td class="fa wrench">cell</td>      <td class="fa file-alt">cell</td>      <td class="fa data">cell</td>      <td class="fa codice">cell</td>    </tr>    <tr>           <td class="fa"></td>      <td class=" fa wrench">        <b class="fa fa-pencil-alt green"></b>        <b class="fa fa-trash-alt red"></b>              </td>      <td class="fa certificate">cell</td>      <td class="fa user-tie"> cell</td>      <td class="fa IP">cell</td>      <td class="fa link">cell</td>      <td class="fa door-open">cell</td>      <td class="fa server">cell</td>      <td class="fa user-circle">cell</td>      <td class="fa key">cell</td>      <td class="fa dice-d20">cell</td>      <td class="fa wrench">cell</td>      <td class="fa file-alt">cell</td>      <td class="fa data">cell</td>      <td class="fa codice">cell</td>    </tr>    <tr>          <td class="fa"></td>      <td class=" fa wrench">        <b class="fa fa-pencil-alt green"></b>        <b class="fa fa-trash-alt red"></b>              </td>      <td class="fa certificate">cell</td>      <td class="fa user-tie"> cell</td>      <td class="fa IP">cell</td>      <td class="fa link">cell</td>      <td class="fa door-open">cell</td>      <td class="fa server">cell</td>      <td class="fa user-circle">cell</td>      <td class="fa key">cell</td>      <td class="fa dice-d20">cell</td>      <td class="fa wrench">cell</td>      <td class="fa file-alt">cell</td>      <td class="fa data">cell</td>      <td class="fa codice">cell</td>    </tr>      <tr>            <td class="fa"></td>      <td class=" fa wrench">        <b class="fa fa-pencil-alt green"></b>        <b class="fa fa-trash-alt red"></b>              </td>      <td class="fa certificate">cell</td>      <td class="fa user-tie"> cell</td>      <td class="fa IP">cell</td>      <td class="fa link">cell</td>      <td class="fa door-open">cell</td>      <td class="fa server">cell</td>      <td class="fa user-circle">cell</td>      <td class="fa key">cell</td>      <td class="fa dice-d20">cell</td>      <td class="fa wrench">cell</td>      <td class="fa file-alt">cell</td>      <td class="fa data">cell</td>      <td class="fa codice">cell</td>    </tr>     <tr>              <td class="fa"></td>      <td class=" fa wrench">        <b class="fa fa-pencil-alt green"></b>        <b class="fa fa-trash-alt red"></b>              </td>      <td class="fa certificate">cell</td>      <td class="fa user-tie"> cell</td>      <td class="fa IP">cell</td>      <td class="fa link">cell</td>      <td class="fa door-open">cell</td>      <td class="fa server">cell</td>      <td class="fa user-circle">cell</td>      <td class="fa key">cell</td>      <td class="fa dice-d20">cell</td>      <td class="fa wrench">cell</td>      <td class="fa file-alt">cell</td>      <td class="fa data">cell</td>      <td class="fa codice">cell</td>    </tr>  </tbody></table>

how to add a width css to table column (html table) for email template in outlook?

Please try the html mailer by nesting tables.

Please find the the below code. This may help you.

<table cellspacing="0" cellpadding="0" style="table-layout: fixed; border-collapse: collapse; width: 100%">
  <tbody>
    <tr style="background-color: #1890ff">
      {% for item in first_table_column_names %}
      <td width="100%" style="border: 1px solid #000000; color: #ffffff; padding: 5px">
        <table cellspacing="0"cellpadding="0">
          <tr>
            <td style="width:30%;background-color:red;">
              {{item.name}}
            </td>
          </tr>
          
        </table>
      </td>
      {% endfor %}
    </tr>
  </tbody>
</table>

Fixed Table Cell Width