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

Question

我有多个 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 有点陌生，正在处理一些混乱的遗留代码，所以请帮助我了解是否可以通过其他方法更好地解决这个问题。

Answer 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;
}

Answer 2

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

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

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

Answer 3

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

div

或

span

标签。

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

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

Answer 4

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)

代替。