Could anyone help me with vaadin table styling? - styles

Question

Could any one help me with this, vaadin table cell borders are not aligned properly with header border, but I don't have this issue in other browser.
I have followed the rules given by vaadin to style the table, even though I have this issue.
Any help would be great!
I am sorry I have not elaborated it properly.
Below are the instructions given by vaadin for table theme.
Table theme building instructions
Vaadin scroll table is very complex widget with dozens of features. These
features set some limitations for theme builder. To keep things working, it
is safest to try to just override values used in default theme and comfort to
these instructions.
Borders in table header and in table body need to be same width
specify vertical borders on .v-table-header-wrap and .v-table-body
*
Table cells in body:
padding/border for cells is to be defined for td elements (class name: .v-table-cell-content)
in default theme there are no borders, but they should work. Just set border-right or border-bottom
no padding or border is allowed for div inside cells (class name: .v-table-cell-wrapper) element
background is allowed for both elements
*
Table headers:
table cells in header contain .v-table-resizer and
.v-table-caption-container div elements, which are both floated to right
to align header caption to body content resizer width + .v-table-caption-container
padding right should be equal to content cells padding-right and border-right.
Possible cell border in header must be themed into column resizer.
*
*/
I have followed the same instructions and below is my SCSS...
<pre>
.v-table-header-wrap{
border-top:1px solid #c6c6c6;
border-left:1px solid #e2e2e2;
background:none #e2e2e2;
height:33px;
.v-table-header{
height:33px;
position:relative;
.v-table-resizer{
height:33px;
border-left:1px solid #d0d0d0;
border-right:1px solid #eee;
width:auto;
position:relative;
z-index:1;
}
}
}
.v-table-caption-container{
background:0 none;
#include box-sizing(border-box);
padding:0.813em 0.9em;
line-height:normal;
overflow:hidden;
position:relative;
top:1px;
}
.v-table-table tr{
td{
padding:4px;
border-color:$ClDwnClr $ClLtClr rgba(0, 0, 0, 0) $ClRtClr;
vertical-align:middle;
border-style:solid;
border-width:1px;
.v-table-cell-wrapper{
color:$Color;
position:relative;
top:0;
overflow:hidden;
text-overflow:ellipsis;
}
}
}
</pre>
The real issue is table cell borders are not aligned properly with table header cell borders in SAFARI browser but this is fine with other browsers.