html - How ot achive table cells combined of fixed width and shrinked to content? -

assume have table, of cells should have equal content, fixed , others fill rest. used 100% method lost fixed size. every thing do, can not achieve both:

.thetable{     display:table;      width:80%; /* or whatever width table*/     height: 200px; }  .thecell{     display:table-cell;     padding:0px 2px;     white-space: pre; /* avoid line breaks*/         border:1px solid black;     vertical-align: middle; } .bigcell{     width:100%; /* shrink other cells */ } .fixedcell {     height: 40px;     width: 70px;  } 

any helps?

fiddle: http://jsfiddle.net/80nmuxs8/4/

here fix

http://jsfiddle.net/80nmuxs8/5/

if set width of cell want filled according contents 1%, grow according content.

the .bigcell doesn't need width take remaining space.

 .contentcell {width: 1%}