Question

我从未使用过复杂的HTML表格。我需要一个包含嵌套列和行的表。我试图创建它，但它有很多表，并且边框的数量随处可见。这是我尝试过的jsFiddle。所以，我要实现的目标是：

所有结构的单个<table>标记
不应出现多个边框。
所有结构应该是一个单独的表，在调整页面大小时行不应与其位置分开。（在我的情况下会发生这种情况）

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>

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>

Updated Fiddle

Answer 3

他为什么要这样的桌子？向他扔石头。

无论如何，不要使用border: xx xxx xxx 尝试始终使用border-bottom，border-right，以便最大限度地减少那里的行数。

添加背景颜色intermitent和悬停效果，也许它会让它更容易被接受。

否则，我不知道。祈祷。

Answer 4

然后，您必须为您拥有的每一行创建一个包含行的全局表。在这些行的单元格内部，可以根据需要创建另一个表格。

您说不应出现多个边框，然后创建一个类以仅显示每个单元格内的表格边框而不显示其他边框，这样您将只有所需的边框。

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

在当前的代码中，您将多个表分开以使行结构如此强制，以至于无法很好地呈现。

嵌套表行HTML CSS

4 个答案: