如何将JSP片段组合成无缝表而不考虑顺序

问题描述 投票:0回答:4

我有多个 JSP,每个 JSP 都包含一个或多个表。

fragment1.jsp:

<table class="foo">
  <tr>
    <td>stuff</td> <td>stuff2</td>
  </tr>
</table>

fragment2.jsp:

<table class="foo">
  <tr>
    <td>more stuff</td> <td>more stuff2</td>
  </tr>
</table>

<table class="bar">
  <tr>
    <td>whatever</td>
  </tr>
</table>

它们由不同配置的包装器使用:

wrapper1.jsp:

<s:include value="fragment1.jsp" />
<s:include value="fragment2.jsp" />

wrapper2.jsp:

<s:include value="fragment2.jsp" />

如果

fragment2.jsp
出现在
fragment1.jsp
之后,我希望这两个表格之间没有边距并显示为一张表格。但是,如果其中任何一个是单独的,我希望它们的格式正常,就像
"foo"
表格的样式一样。

有没有办法以某种方式指示此样式首选项,以便两个

"foo"
表格在相邻时显示为单个表格,但在其他情况下正常样式?

我对 Struts/JSP 有点陌生,正在处理一些混乱的遗留代码,所以请帮助我了解是否可以通过其他方法更好地解决这个问题。

html css jsp struts2
4个回答
1
投票

实际上仅使用 CSS 即可实现,无需 JavaScript 且无需更改 HTML。

一个全屏演示抵得上一千字...

基本上,您需要使用

border-collapse: collapse;
并指定以下设置:

  1. 当表格单独存在时,所有边框和边距通常设置:

    table {
        border-collapse : collapse;
                 border : 4px solid black;
             margin-top : 20px;
          margin-bottom : 20px;
    }
    
  2. 当桌子与一张或多张其他桌子相邻时:

    • 如果不是第一个,删除

      margin-top
      border-top

      table + table {
          margin-top : 0;
          border-top : none;
      }
      
    • 如果不是最后一个:删除

      margin-bottom
      border-bottom

      table:not(:last-child) {
          border-bottom : none;
          margin-bottom : 0;
      }
      

还要确保避免在每个表格的最后一个

<tr>
上设置边框:

tr:not(:last-child) {
    border: 1px solid silver;
}

1
投票

最好使用 javascript 和 jquery 来完成此类工作。所以我认为这会有所帮助:

$(document).ready(function(){
    var secondTable = $(".bar").html();
     $(".foo").append(secondTable);
});

注意,如果您还没有包含 jquery 库,则需要包含它。


1
投票

如果不使用表格数据,则无需使用表格。您始终可以使用

div
span
标签。

<div class="foo">
  <span>more stuff</span> <span>more stuff2</span>
</div>

<div class="bar">
  <span>whatever</span>
</div> 

1
投票

CSS 选择器

table.foo + table.foo
将选择
table.foo
中出现在另一个相同类型元素之后的每个元素。 您可以使用它来删除以下 table.foo 元素之后的
all
的边距:

table.foo + table.foo {
    margin-top: 0px;
    margin-bottom: 0px;
}

如果它仅适用于 second 元素,请使用

table.foo:nth-child(2)
代替。

© www.soinside.com 2019 - 2024. All rights reserved.