HTML怎么CSS表格嵌套,CSS＃/ HTML5 Chrome中的嵌套表格和子填充

我正在尝试为我的UI库SlateJS设置一个多面板小部件。基本上，多面板小部件通过多个水平或垂直对齐的面板填充所有可用的空间。每个面板都可以有一个与之关联的工具栏。CSS＃/ HTML5 Chrome中的嵌套表格和子填充

我正在使用一系列CSS表来划分可用空间，这很好。问题是布局是水平的，因为某些原因，内部表拒绝和任何有填充的元素一起玩。我无法找到填充问题的来源。我在Chrome中诊断了大约17个小时，而且我仍然无法找到此填充的来源。

如果我将一个元素添加到嵌套在多面板内部的面板的内容窗格中，会发生什么情况，外部表格单元的行为就好像它具有与内容的填充值相等的页边距值项目。这真的很奇怪，因为内表格单元格不应该影响外单元格的流动。

下面是采取行动的问题进行现场演示的链接：

注：该网站仅适用于Chrome目前的工作。另外请注意，这个网站使用的阴影很重，所以你必须挖掘阴影的内脏才能看到结构。

这里有一个基本的表示我在做什么：

SlateJS.css：

slate-app {

display: block;

}

/* LIGHTBOX */

/* -------------------------------------------------------------------------------- */

slate-app::shadow > .appContainer {

position: relative;

height: 100%;

}

slate-app::shadow > .appContainer > slate-lightbox {

position: absolute;

display: none;

top: 0;

bottom: 0;

left: 0;

right: 0;

z-index: 1;

}

slate-app::shadow > .appContainer > slate-lightbox[visible="true"] {

display: block;

}

/* MULTIPANEL */

/* -------------------------------------------------------------------------------- */

slate-multipanel {

display: block;

width: 100%;

height: 100%;

}

slate-multipanel > * {

display: none;

}

slate-multipanel::shadow > .panelTable {

display: table;

table-layout: fixed;

width: 100%;

height: 100%;

}

slate-multipanel::shadow .panelRow0, slate-multipanel::shadow .panelRow1 {

display: table-row;

width: 100%;

}

slate-multipanel::shadow .panelRow1 {

width: 100%;

height: 1px;

cursor: ns-resize;

}

slate-multipanel::shadow .panelCell0, slate-multipanel::shadow .panelCell1 {

position: relative;

display: table-cell;

width: 100%;

}

slate-multipanel::shadow .panelCell1 {

width: 1px;

height: 100%;

cursor: ew-resize;

}

slate-multipanel::shadow slate-expander {

position: absolute;

cursor: crosshair;

display: block;

}

/* PANEL */

/* -------------------------------------------------------------------------------- */

slate-panel {

position: relative;

display: table;

width: 100%;

height: 100%;

}

slate-panel > slate-pane:first-of-type {

display: table-row;

width: 100%;

word-wrap: break-word;

background-color: #FF0000;

}

slate-panel > slate-toolbar:first-of-type {

display: table-row;

width: 100%;

height: 0;

}

/* PANE */

/* -------------------------------------------------------------------------------- */

slate-pane::shadow > .paneCell {

display: table-cell;

width: 100%;

}

/* TOOLBAR */

/* -------------------------------------------------------------------------------- */

slate-toolbar::shadow > .toolbarCell {

display: table-cell;

}

标记由Slate.js和她相关的扩展产生：

#shadow-root

#shadow-root

HERP

#shadow-root

DERP

#shadow-root

TEST

#shadow-root

DERP

#shadow-root

HERP

#shadow-root

DERP

从上图中可以看到，邻居表格单元由于某种原因偏移量与其邻居的子元素中的填充量相同。有谁知道为什么会发生这种情况，以及如何预防这种情况？