html - Why does max-width behave like a minimum width in a table cell? -

setting max-width in table cell 250px will, paradoxically, prevent cell (column) getting smaller 250px when width of table changes. @ same time, maximum width not seem constrained @ all.

...why?

fiddle:

see in action: http://jsfiddle.net/cehjc8m6/1/

html:

<table> <tr>     <td>left col</td>     <td class="ell">         rather long text. should truncateed when         exceeds available horizontal space.     </td>     <td>right col</td> </tr> </table> 

css:

table {     width: 500px;  // change value see effect } td {     white-space: nowrap; } td.ell {     overflow: hidden;     text-overflow: ellipsis;     max-width: 250px; } 

try this:

td.ell {     overflow: hidden;     text-overflow: ellipsis;     max-width: 250px;     display: inline-block; } 

see here : http://jsfiddle.net/sachinkk/cehjc8m6/3/

var table = document.queryselector("table"),      cell  = document.queryselector(".ell"),      sizer = document.queryselector("input"),      span  = document.queryselector("span");    sizer.addeventlistener("wheel", wheelhandler, false);  updatewidthdisplay();    function wheelhandler (evt)  {      var incr = evt.deltay < 0 ? 10 : -10;      table.style.width = (table.offsetwidth + incr) + "px";      updatewidthdisplay();  }    function updatewidthdisplay ()  {      sizer.value = table.offsetwidth + "px";      span.textcontent = cell.offsetwidth + "px";  }

body {      font: normal 13px sans-serif;  }  table {      width: 500px;      border-collapse: collapse;      background: gold;  }  td {      white-space: nowrap;  }  td.ell {      overflow: hidden;      text-overflow: ellipsis;      max-width: 250px;      background: tomato;      display: inline-block;  }  input {      width: 50px;  }  em {      color: #aaa;      padding-left: 12px;  }

<table>  <tbody>  <tr>      <td>left col</td>      <td class="ell">          rather long text. should truncated when          exceeds available horizontal space.      </td>      <td>right col</td>  </tr>  </tbody>  </table>    <p>      table width: <input> <em>&larr; use mouse wheel change</em><br>      middle col width: <span></span>