Question

I have the following styles applied to a table

width: auto;
min-width: 98.5%;

when I look in chrome browser the table which is inside a div appears to have only about 50% width of the containing div. In IE9, the table occupies the full width. In Chrome, when I see the Styles applied using F12, both styles are applied and not not crossed.

.containing > table {
position: relative;
left: 0;
margin-right: 0;
top: 0;
border: 1px solid #DDD;
width: auto;
min-width: 98.5%;
margin-bottom: 1em;
-webkit-border-bottom-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 8px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
}

html:

<div class="containing">
<table>

</table>
</div>

Answer 1

Hey i you should define border radius don’t define in your table if you want border

I think you define border and border radius in your div as like this

Check to live ex. http://jsfiddle.net/RfWWh/

and adjust according to your design ..