嵌套表格行 HTML CSS

Question

我从来没有太多接触复杂的HTML表格。我需要一个嵌套列和行的表格。我尝试创建它，但是它有很多表，而且各种边框出现了。

这里是我尝试过的jsFiddle。

所以，我的目标是：

• 所有结构都在单个<table>标记中
• 不应出现多个边框。
• 所有结构都应该是一个单独的表格，调整页面大小时行不应分离。(这在我的情况下发生了)

- trex

---

@Anzeo - 是的，这是客户的要求。他给了一张PNG图片，展示了那种表格结构。 - trex

@trex，你不应该使用表格来进行布局（电子邮件模板除外）。如果需要类似表格的布局，请看一下Bootstrap。对于你的问题：仅使用一个<table>标签是行不通的，你不能在<td>中放置<tr>而不使用<table>。 - AlexG

@AlexG - 哦！我不知道那个。我的要求是 - 只需一个具有该结构的表格。最后一列中有一些输入字段需要保存到数据库中。 - trex

@trex 如果客户基本上是唯一能看到这个布局的人，那么这不是什么大问题，只要不让这成为一个坏习惯。如果您正在使用表格来显示例如数据库中的内容，则建议使用不同的布局进行公开查看。 - AlexG

@LinkinTED - 抱歉我没有权利分享那个。图片包含公司的个人数据！但是假设有与fiddle中所示相同的表格。 - trex

Answer 1

这是您想要的结构，不要将宽度设为百分比值，以避免在页面调整大小时失去形状。

    <table border="1" width="800" height="100">
      <tr>
        <th colspan="7"></th>
        <th></th>
      </tr>
      <tr>
        <td colspan="7"></td>
        <td></td>
      </tr>
      <tr>
        <td rowspan="3"></td>
        <td></td>
        <td colspan="3"></td>
        <td></td>
        <td colspan="2"></td>
      </tr>
      <tr>
        <td rowspan="2"></td>
        <td rowspan="2"></td>
        <td></td>
        <td></td>
        <td></td>
        <td colspan="2"></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td colspan="2"></td>
      </tr>
    </table>

- Eng Cy

---

完美的解决方案！谢谢。原来只是rowspan和colspan的游戏。学到了新东西。非常感谢 :) - trex

Answer 2

实际上，只使用一个表格无法得到精确的结果。你有一些单元格仅出现在另一个单元格的一半高度或宽度上。这就是不起作用的地方。

所以我为您设计了这个结构，它尽可能接近要求的效果：

<table>
    <colgroup>
        <col width="3%" span="2" />
        <col width="10%" />
        <col width="3%" />
        <col width="18%" />
        <col width="*" span="2" />
    </colgroup>
    <tr>
        <td colspan="6">x</td>
        <td>x</td>
    </tr>
    <tr>
        <td colspan="6">x</td>
        <td>x</td>
    </tr>
    <tr>
        <td rowspan="3">x</td>
        <td>x</td>
        <td colspan="3">x</td>
        <td>x</td>
        <td>x</td>
    </tr>
    <tr>

        <td rowspan="2">x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
    </tr>
    <tr>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
        <td>x</td>
    </tr>
</table>

更新后的Fiddle

- GreyRoofPigeon

---

你的解决方案听起来也不错。只是好奇一下，在这种情况下 span="2" 是做什么用的？ - trex

使用 colgroup 和 col 标签，您可以为列定义样式。因此 <col width="3%" span="2%" /> 表示列应为 3％ 宽度，并且它应跨越两列，在这种情况下是前两列。 - GreyRoofPigeon

@LinkinTED- 好的，明白了！谢谢。 - trex

Answer 3

他为什么想要那样的表格？扔块石头打他吧。

无论如何，不要使用 border: xx xxx xxx，尽量使用 border-bottom、border-right，这样可以减少线条的数量。

添加间歇性的背景颜色和鼠标悬停效果，也许会使其更加可接受。

否则，我不知道。祈祷吧。

- Aramil Rey

Answer 4

然后，您需要创建一个全局表格，每行都有一行。在这些行的单元格内部，再创建另一个表格以按您想要的样式进行排版。

您说不应该出现多个边框，那么请创建一个类，仅显示每个单元格内部表格的边框而不是其他表格，这样您将只拥有所需的边框。

请记住，全局表必须包含所有其他表。一个表格包含所有内容。

在您当前的代码中，您有多个分离的表格来构建行结构，因此它不会被正确呈现。

- Joze

---

我尝试过了，但无法按照我的要求进行格式化。 - trex

@trex，具体是什么要求？我以前做过这个（不是没有问题），但绝对是可行的。特别是在新闻通讯的情况下。 - Joze

只是一个具有该结构的表格。最后一列中有一些输入字段需要保存到数据库中。 - trex

@trex 我不会替你完成 ;) 我只是给了你很多关于如何完成它的线索。我百分之百确定这是可能的。我以前在处理表格时做过更糟糕的事情。 - Joze

@Joze- 没问题，非常感谢 :) 顺便说一下 - 我正在尝试再次相同的操作。 - trex