title: Firefox td height bug in complex table
body: <p>I try to solve a problem on firefox that I have with a component react of one of my library. This component is a table that displays a calendar, where each day is divided into 2. In short.</p>
  <p>The first column and the first row must be in sticky position because potentially scrollable.</p>
  <p>I have a problem with Firefox, the height of the td's where the events are supposed to be are not at 100% of their height.</p>
  <p>By searching on the internet, I found some answers, especially using tr,td {height: 100%}, but it produces a very strange behavior for me.</p>
  <p>Here is a summary of the code, and its style :</p>
  <p>React code to generate table :</p>
  <pre><code>&lt;PatternTable className={`${containerClassNames.join(&quot; &quot;)}`}&gt;
                  &lt;Thead className=&quot;pc-thead&quot; cellHeight={!!headerOptions.cellHeight ? headerOptions.cellHeight : null} cellWidth={!!headerOptions.cellWidth ? headerOptions.cellWidth : null}&gt;
                      &lt;tr&gt;  
                          &lt;th&gt;&lt;/th&gt;
                          {resources.map(resource =&gt; {
                              return(
                                &lt;th onClick={() =&gt; onResourceClick(resource)}&gt;
                                  &lt;span&gt;
                                      {resource.title}
                                    &lt;/span&gt;
                                &lt;/th&gt;
                              )
                          })}
                      &lt;/tr&gt;
                  &lt;/Thead&gt;
                  &lt;Tbody className='pc-tbody' &gt;
                    {rows}
                  &lt;/Tbody&gt;
  &lt;/PatternTable&gt;
  </code></pre>
  <p>In {rows} :</p>
  <pre><code> &lt;Tr isToday={moment().isSame(day, &quot;day&quot;)}&gt;
            &lt;th&gt;{!!context.dayRender ? context.dayRender(day) : day.format(&quot;ddd DD&quot;)}&lt;/th&gt;
            {context.resources.map(resource =&gt; {
                return(
                  &lt;Day {...}/&gt;
                )
            })}
  &lt;/Tr&gt;
  </code></pre>
  <p>And in Day component :</p>
  <pre><code>&lt;Td className=&quot;pc-td&quot;&gt;
          &lt;Cell {...}/&gt;
          &lt;Cell {...}&gt; 
  &lt;/Td&gt;
  </code></pre>
  <p>And Cell component it's a div in 100% height where I turn the events.</p>
  <p>Here, Styled-components of all components :</p>
  <pre><code>const PatternTable = styled(&quot;table&quot;)`
      width: 100%;
      height: 100%;
      table-layout: fixed;
      border-collapse: collapse;
      tr,td{
          min-height: 100%;
      }
  `
  
  const Thead = styled(&quot;thead&quot;)&lt;{moreThanSix: boolean, cellHeight?:number, cellWidth?: number}&gt;`
      height: 50px;
      background: #F2F7FA;
      /* border-top: 1px solid #c9d1d6; */
      color: #435F71;
      position: sticky;
      top: 0;
      z-index:4;
      tr th{
          width: ${props =&gt; props.moreThanSix ? props.cellWidth ? `${props.cellWidth}px`: &quot;110px&quot; : &quot;150px&quot;};
          height: ${props =&gt; props.moreThanSix ? props.cellHeight ? `${props.cellHeight}px` : &quot;120px&quot; : &quot;max-content&quot;};
          text-transform: capitalize;
          overflow: hidden;
      }
      tr th:first-of-type{
          width: 100px !important;
          position: sticky;
          left: 0;
          z-index: 3;
          background: #dfe5e9;
          z-index: 3;
      }
      th{
          border-right: 1px solid  #c9d1d6;
          &amp;:first-of-type{
              border: none !important;
          }
      }
      &amp;:after{
          content:&quot;&quot;;
          position: absolute;
          bottom:0;
          width: 100%;
          left: 0;
          height:1px;
          background: #c9d1d6;
      }
  `
  
  const Tbody = styled(&quot;tbody&quot;)`
      th{
          position: sticky;
          left: 0;
          z-index: 1;
          background: #F2F7FA;
          text-transform: capitalize;
          color: #435F71;
          z-index: 3;
          &amp;:after{
              content:&quot;&quot;;
              position:absolute;
              width:1px;
              height: 100%;
              right:0;
              top:0;
              background: #c9d1d6;
          }
      }
  `
  
  const Tr = styled(&quot;tr&quot;)&lt;{isToday?: boolean}&gt;`
      border-bottom: 1px solid #b9b9b9;
      th{
          color: ${props =&gt; props.isToday ? &quot;var(--color-purple)&quot; : &quot;&quot;};
          font-weight: ${props =&gt; props.isToday ? 700 : 500};
      }
      td{
          border-right: 1px solid  #c9d1d6;
      }
      &amp;::last-of-type{
          border: none;
      }
      td:last-of-type{
          border: none !important;
      }
  `
  
  const Td = styled(&quot;td&quot;)&lt;{customHeight?: number}&gt;`
      border-right: 1px solid #c9d1d6;
      height: ${props =&gt; !!props.customHeight ? props.customHeight+&quot;px&quot; : &quot;80px&quot;};
      &amp;.pc-week-count{
          background: #F2F7FA;
          position: relative;
          span{
              position: absolute;
              top: 5px;
              left: 5px;
              color: #435F71;
          }
      }
  `
  
  </code></pre>
  <p>Here is the result on chrome (&amp; edge) :
  <a href="https://i.stack.imgur.com/tnNrD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tnNrD.png" alt="enter image description here" /></a></p>
  <p>Here is the result on Firefox :
  <a href="https://i.stack.imgur.com/qYFqg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qYFqg.png" alt="enter image description here" /></a></p>
  <p>And if I set tr,td to 100% height on all browsers... :
  <a href="https://i.stack.imgur.com/FuNLb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FuNLb.png" alt="enter image description here" /></a></p>
  <p>I hope I would have been precise enough... I can prepare a codeandbox if it's really necessary, but it might take me a little time ^^</p>
  <p>Thank you !</p>