CSS Table Td Width - Fixed, Not Flexible

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>

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

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>

Using CSS td width absolute, position

This may not be what you want to hear, but display: table-cell does not respect width and will be collapsed based on the width of the entire table. You can get around this easily just by having a display: block element inside of the table cell itself whose width you specify, e.g

<td><div style="width: 300px;">wide</div></td>

This shouldn't make much of a difference if the <table> itself is position: fixed or absolute because the position of the cells are all static relative to the table.

http://jsfiddle.net/ExplosionPIlls/Mkq8L/4/

EDIT: I can't take credit, but as the comments say you can just use min-width instead of width on the table cell instead.

CSS Table columns width: fixed - dynamic(30%) - dynamic(70%) - fixed

Like this:

<table>
    <tr>
      <td style="width:200px;">
        200px width - content
      </td>
      <td width="30%">
        dynamic width - content
      </td>
      <td width="70%">
        dynamic width - content
      </td>
      <td style="width:100px;">
         100px width - content
      </td>
    </tr>
  </table>

table {
    width:100%;
    border-collapse:collapse;
    table-layout:fixed;
}

td {
    border: 1px solid #333;
}

http://jsfiddle.net/7dSpr/

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 fix width of table cell with flex?

If you wish to maintain the flex declaration on your <table>, <th>, <td> elements, you can apply an additional width property to the table cells in your stylesheet, immediately beneath the flex declaration, like this:

td, th {
  padding: 0.5rem 1rem;
  border: 1px solid green;
  white-space: nowrap;

  display: flex;
  align-items: center;
  flex: 0 0 auto;
  width: 90px;  // <= WIDTH DECLARATION
}

Working Example:

table {
  border-collapse: collapse;
  border-spacing: 0;
  
  table-layout: fixed;
  width: 100%;
}

tr {
  display: flex;
}

td, th {
  padding: 0.5rem 1rem;
  border: 1px solid green;
  white-space: nowrap;
  
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  width: 90px;
}

.t-name {
  min-width: 360px;
  flex: 1 1 auto;
}

.t-name span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; 
}

<table>
    <tr class="row">
      <th>ID</th>
      <th class="t-name">Name</th>
      <th>Category</th>
      <th>External ID</th>
      <th>Type</th>
      <th>Action</th>
    </tr>
    <tr class="row">
      <td>1</td>
      <td class="t-name">T-Shirt with smile</td>
      <td>Men clothes</td>
      <td>434</td>
      <td>Summer</td>
      <td><button>Delete</button></td>
    </tr>
    <tr class="row">
      <td>2</td>
      <td class="t-name"><span>New-brand casual blue Dolche and Gabana Edt USA PRODUCTION<span></td>
      <td>Woman clothes</td>
      <td>321</td>
      <td>Summer</td>
      <td><button>Delete</button></td>
    </tr>
    <tr class="row">
      <td>3</td>
      <td class="t-name">Keds</td>
      <td>Clothes</td>
      <td>521</td>
      <td>Spring</td>
      <td><button>Delete</button></td>
    </tr>
    
  </table>

Table with table-layout: fixed; and how to make one column wider

You could just give the first cell (therefore column) a width and have the rest default to auto

table {

  table-layout: fixed;

  border-collapse: collapse;

  width: 100%;

}

td {

  border: 1px solid #000;

  width: 150px;

}

td+td {

  width: auto;

}

<table>

  <tr>

    <td>150px</td>

    <td>equal</td>

    <td>equal</td>

  </tr>

</table>

---

Related Topics