css 100 10px,css - CSS3 equivalent to width:calc(100% - 10px) - Stack Overflow

If you change the box model rendering to box-sizing: borderbox then the padding will be included in the total width instead of being added to it.

With this example I am assuming you are adding the class to the wrapping elements.

.fit {

width:100%

padding-right:10px

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;

}

Browser support is very good; all modern browsers. Only you will need a polyfill for IE7 and under.

For more background info: paulirish.com/2012/box-sizing-border-box-ftw/

EDIT:

This is a solution that I believe completely meets your brief, please see fiddle: http://jsfiddle.net/David_Knowles/UUPF2/

.fit {

width:100%

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;

}

td {

padding-right: 10px;

}