how to stop browser from creating gap near table when browser scrollbar
appears
A small gap occurs to the right of a table when the following conditions
are met:
table border is greater than 1px
border-collapse is collapse
browser vertical scrollbar is visible
browser is firefox
Here is some sample code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {background-color:green;}
table
{
background-color:#fff;
width:600px;
border-collapse:collapse;
border:4px solid #222;
/*border-spacing:0;*/
margin: 0px auto;
}
tr {height:56px;}
td
{
font-family: trebuchet ms;
font-size: 10.0pt;
font-weight:bold;
border:1px solid #222;
padding-left:4px;
}
</style>
</head>
<body>
<table>
<tr >
<td>some content</td>
<td>some content</td>
<td>some content</td>
</tr>
<tr >
<td>some content</td>
<td>some content</td>
<td>some content</td>
</tr>
<tr >
<td>some content</td>
<td>some content</td>
<td>some content</td>
</tr>
<tr >
<td>some content</td>
<td>some content</td>
<td>some content</td>
</tr>
<tr >
<td>some content</td>
<td>some content</td>
<td>some content</td>
</tr>
<tr >
<td>some content</td>
<td>some content</td>
<td>some content</td>
</tr>
</table>
</body>
</html>
Any ideas are appreciated. Thanks.
No comments:
Post a Comment