[csswg-drafts] [css-tables] Vertical alignment on cells whose content is taller than the row (#7460)

mstensho has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-tables] Vertical alignment on cells whose content is taller than the row ==
Table rows usually grow to encompass all their cells, but there are some ways to make the cells taller than the row - by using percentage block-size.

In such scenarios, should we then let vertical-align apply a negative block-offset?

I.e. what should we see here:

```html
<!DOCTYPE html>
<style>
  .table {
    display: table;
    border-spacing: 10px;
    margin-top: 100px;
    height: 100px;
    background: pink;
  }
  .cell {
    display: table-cell;
    height: 100%;
  }
  .stretch {
    height: 200%;
    background: rgba(100, 100, 100, 0.5);
  }
</style>
<div class="table">
  <div class="cell" style="vertical-align:top;">
    <div class="stretch">top</div>
  </div>
  <div class="cell" style="vertical-align:middle;">
    <div class="stretch">middle</div>
  </div>
  <div class="cell" style="vertical-align:bottom;">
    <div class="stretch">bottom</div>
  </div>
</div>
```

Blink and EdgeHTML move the middle and bottom aligned cells upwards (just like align-self on a flex item), above the table, while Gecko doesn't (which in a way is similar to how auto inline margins never result in a negative line-left offset for block-level children in a regular block container).

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7460 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 6 July 2022 07:42:40 UTC