如何将 JSP 片段组合成无缝的 table 而不管顺序

Question

我有多个 JSP，每个 JSP 包含一个或多个 table。

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 之后，我希望这两个 table 之间没有空白并且显示为一个 table。但是，如果其中任何一个是单独的，我希望它们被正常格式化为 "foo" tables 的样式。

有没有办法以某种方式表明这种样式偏好，使得两个 "foo" table 在相邻时将显示为单个 table，但在其他方面它们本身的样式正常？

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

Answer 1

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

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

请注意，如果您尚未包含 jquery 库，则需要包含它。

Answer 2

如果您不使用表格数据，则无需使用表格。您始终可以使用 div 或 span 标签。

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

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

Answer 3

CSS select 或 table.foo + table.foo 将 select table.foo 的每个元素出现在另一个相同类型的元素之后。您可以使用它来删除 all 后 table.foo 个元素的边距：

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

如果它应该仅适用于 second 元素，请改用 table.foo:nth-child(2)。

Answer 4

仅 CSS 实际上是可能的，没有 JavaScript 和没有改变 HTML.

A full screen demo is worth a thousand words...

基本上，您需要使用border-collapse: collapse;并指定以下设置：

当table单独时，所有边框和边距正常设置：

table {
    border-collapse : collapse;
             border : 4px solid black;
         margin-top : 20px;
      margin-bottom : 20px;
}

当 table 与一个或多个其他 table 相邻时：
- 如果不是第一个，去掉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;
}
```

还要确保避免在每个 table:

的最后一个 <tr> 上设置边框

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

如何将 JSP 片段组合成无缝的 table 而不管顺序

How to combine JSP fragments into seamless table regardless of ordering

html

css

jsp

struts2