{"data":{"site":{"siteMetadata":{"title":"Lime Brains","description":"We are The Software House where business questions meet software answers.","url":"https://limebrains.com"}},"markdownRemark":{"html":"

Problem 😱

\n

Let’s say we have a following html table:

\n
<table style=\"height: 1px;\">\n  <tbody>\n  <tr>\n    <td class=\"full-height\">\n      <div class=\"full-height\" style=\"background: red;\">\n        height 100%\n      </div>\n    </td>\n    <td>\n      1<br/>\n      2<br/>\n      3<br/>\n    </td>\n  </tr>\n  </tbody>\n</table>
\n

with css:

\n
.full-height { height: 100%; }
\n

Result:

\n

\"Initial\"

\n

We want the red part to have a full height of the row but height: 100% on div and td is not enough.

\n
\n

Solution πŸ€“

\n

πŸŽ‰ πŸŽ‰ πŸŽ‰ more css πŸŽ‰ πŸŽ‰ πŸŽ‰

\n
table {\n    height: 1px;\n}
\n

Result:

\n

\"Result\"

\n

Confirmed to work on Chrome, Firefox and Safari.

\n

Why 1px? No idea.

","excerpt":"Problem 😱 Let’s say we have a following html table: with css: Result: We want the red part to have a full height of the row but on and…","frontmatter":{"title":"How to make a div inside table td with height 100%?","subtitle":"How to make a div inside table td with height 100%?","date":"2021-03-02 13:00","seo":{"title":"How to make a div inside table td with height 100%?","description":"How to make a div inside table td with height 100%?","noindex":false}},"fields":{"slug":"/blog/2021-03-02T13:00-heigh-100-inside-table-td/"}}},"pageContext":{"slug":"/blog/2021-03-02T13:00-heigh-100-inside-table-td/","indexable":false}}