Question

考虑下表，表示图表，颜色显示单元格区域：

<style>
   .y-axis {
       background-color: red;
       display:flex;
       flex-flow: column-reverse nowrap;
       justify-content: space-between;
   }

   .graph {
       background-color:purple;
       width:300px;
       height:300px;
       border-left:1px solid black;
       border-bottom:1px solid black;
   }

   .x-axis {
       display:flex;
       flex-flow:row nowrap;
       justify-content: space-around;
       background-color:yellow;
   }
</style>
<table style="border-collapse: collapse;">
    <tbody>
        <tr>
            <td rowspan="3" class="y-axis">
                <span>0</span>
                <span>1</span>
                <span>2</span>
                <span>3</span>
            </td>
            <td style="background-color: blue; height:5px;"></td>
        </tr>
        <tr>
            <td class="graph"></td>
        </tr>
        <tr>
            <td style="background-color: blue; height:5px;"></td>
        </tr>
        <tr>
            <td></td>
            <td class="x-axis">
                <span>1</span>
                <span>2</span>
                <span>3</span>
                <span>4</span>
                <span>5</span>
            </td>
        </tr>
    </tbody>
</table>

https://jsfiddle.net/o6x2rehy/

在Firefox 58和IE 12（以及可能是所有其他浏览器）中，由于TD的存在，第一个rowspan元素会忽略其display:flex;属性。

该表假设看起来像

<style>
   .y-axis {
       background-color: red;
       display:flex;
       flex-flow: column-reverse nowrap;
       justify-content: space-between;
   }

   .graph {
       background-color:purple;
       width:300px;
       height:300px;
       border-left:1px solid black;
       border-bottom:1px solid black;
   }

   .x-axis {
       display:flex;
       flex-flow:row nowrap;
       justify-content: space-around;
       background-color:yellow;
   }
</style>
<table style="border-collapse: collapse;">
    <tbody>
        <tr>
            <td rowspan="3">
                <div class="y-axis">
                    <span>0</span>
                    <span>1</span>
                    <span>2</span>
                    <span>3</span>
                </div>
            </td>
            <td style="background-color: blue; height:5px;"></td>
        </tr>
        <tr>
            <td class="graph"></td>
        </tr>
        <tr>
            <td style="background-color: blue; height:5px;"></td>
        </tr>
        <tr>
            <td></td>
            <td class="x-axis">
                <span>1</span>
                <span>2</span>
                <span>3</span>
                <span>4</span>
                <span>5</span>
            </td>
        </tr>
    </tbody>
</table>

https://jsfiddle.net/bpqnw3sc/1/

但第一个div肿胀消耗第一个单元格中的所有垂直空间。

表格单元格是否忽略了它的rowspan属性预期行为？

如果是这样，是否有一种仅限CSS的方式来指示后一代码中的div膨胀以占据单元格中的完整垂直空间？（假设主图形区域（紫色）的高度，当前固定为300px，将是可变的，未知先验。）

Answer 1

是否具有“display：flex;”的表格单元格的预期行为忽略“rowspan”属性？

是

原因是rowspan属性影响表格单元格 <td>元素，仅影响该元素，因此当一个元素添加display: flex时，它停止成为表格单元格。

是否有一种仅使用CSS的方式来指示后一代码中的div 占据牢房中的完整垂直空间？（假设的高度主图区域（紫色），目前固定为300px，将是可变的和未知的先验。）

没有

（好吧，也许，如果其中一个解决方法是一个选项：Make a DIV fill an entire table cell）

我建议不要使用<table>进行布局，并且可以使用Flexbox实现类似的布局，但有一些值得注意的限制，如下所述：

Layout a flex box similar to a table?

因此，如果单元格可以具有固定的宽度，就像使用table-layout: fixed的表格一样，您也可以跨越多个列的元素，类似于{{1确实。

这是使用Flexbox的开始

Fiddle demo

Stack snippet

＆＃13;

rowspan

＆＃13;

.container {
  display: inline-block;
}

.flex {
  display: flex;
}

.flex.column {
  flex-direction: column;
}

.flex.column-reverse {
  flex-direction: column-reverse;
}

.bkg-yellow {
  background-color: yellow;
}
.bkg-yellow span {
  flex: 1;
}

.bkg-purple {
  background-color: purple;
  width: 300px;
  height: 300px;
  border-left: 1px solid black;
  border-bottom: 1px solid black;
}

.bkg-red {
  background-color: red;
}
.bkg-red span {
  flex: 1;
}

.bkg-blue {
  background-color: blue;
  height: 5px;
}

＆＃13;

具有“display：flex;”的表格单元格的预期行为吗？忽略“rowspan”属性？

1 个答案: