title: Could anyone help me with vaadin table styling?
body: <p>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.</p>
  
  <p>Any help would be great!</p>
  
  <p>I am sorry I have not elaborated it properly.</p>
  
  <p>Below are the instructions given by vaadin for table theme.</p>
  
  <p><strong>Table theme building instructions</strong></p>
  
  <p>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.</p>
  
  <ul>
  <li>Borders in table header and in table body need to be same width</li>
  <li>specify vertical borders on .v-table-header-wrap and .v-table-body
  *</li>
  <li><strong>Table cells in body:</strong></li>
  <li>padding/border for cells is to be defined for td elements (class name: .v-table-cell-content)</li>
  <li>in default theme there are no borders, but they should work. Just set border-right or border-bottom</li>
  <li>no padding or border is allowed for div inside cells (class name: .v-table-cell-wrapper) element</li>
  <li>background is allowed for both elements
  *</li>
  <li><strong>Table headers:</strong></li>
  <li>table cells in header contain .v-table-resizer and </li>
  <li>.v-table-caption-container div elements, which are both floated to right</li>
  <li>to align header caption to body content resizer width + .v-table-caption-container</li>
  <li>padding right should be equal to content cells padding-right and border-right.</li>
  <li>Possible cell border in header must be themed into column resizer.
  *
  */</li>
  </ul>
  
  <p>I have followed the same instructions and below is my SCSS...</p>
  
  <pre><code>&lt;pre&gt;
   .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;
         }
      }
   }
  &lt;/pre&gt;
  </code></pre>
  
  <p>The real issue is table cell borders are not aligned properly with table header cell borders in <strong>SAFARI</strong> browser but this is fine with other browsers.</p>