Question

任何人都可以帮我这个，vaadin表单元格边框与标题边框没有正确对齐，但我在其他浏览器中没有这个问题。我遵循了vaadin给出的规则来设置表格，即使我有这个问题。

任何帮助都会很棒！

对不起，我没有详细说明。

以下是vaadin为表格主题提供的说明。

表格主题构建说明

Vaadin滚动表是一个非常复杂的小部件，具有许多功能。这些功能为主题构建器设置了一些限制。为了让事情顺利进行，它是最安全的尝试只是覆盖默认主题和舒适使用的值这些说明。

表格标题和表格主体中的边框需要宽度相同
在.v-table-header-wrap和.v-table-body上指定垂直边框 *
正文中的表格单元格
为td元素定义单元格的填充/边框（类名：.v-table-cell-content）
在默认主题中没有边框，但它们应该有效。只需设置border-right或border-bottom
单元格内的div（类名：.v-table-cell-wrapper）元素不允许填充或边框
两个元素都允许背景 *
表格标题：
标题中的表格单元格包含.v-table-resizer和
.v-table-caption-container div元素，它们都向右浮动
将标题标题与正文内容缩放器宽度+ .v-table-caption-container
padding right应该等于内容单元格padding-right和border-right。
标题中可能的单元格边框必须以列大小调整器为主题。 * * /

我遵循了相同的说明，下面是我的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>

真正的问题是表格单元格边框未与 SAFARI 浏览器中的表格标题单元格边框正确对齐，但这对其他浏览器来说没问题。

任何人都可以帮助我使用vaadin桌面样式吗？

0 个答案: