Make a DIV fill an entire table cell

by

I had to set a fake height to the <tr> and height: inherit for <td>s

tr has height: 1px (it’s ignored anyway)

Then set the td height: inherit

Then set the div to height: 100%

This worked for me in IE edge and Chrome:

<table style="width:200px;">
    <tr style="height: 1px;">
        <td style="height: inherit; border: 1px solid #000; width: 100px;">
            <div>
              Something big with multi lines and makes table bigger
            </div>
        </td>
        <td style="height: inherit; border: 1px solid #000; width: 100px;">
            <div style="background-color: red; height: 100%;">
                full-height div
            </div>
        </td>
    </tr>
</table>

More Related Contents:

  1. difference between div and span in simple language [duplicate]
  2. How can I make Bootstrap columns all the same height?
  3. Bootstrap dropdown sub menu missing
  4. How to identify unused CSS definitions from multiple CSS files in a project
  5. How does the CSS Block Formatting Context work?
  6. CSS3 gradient background set on body doesn’t stretch but instead repeats?
  7. Any recommendations for a CSS minifier? [closed]
  8. :first-child not working as expected
  9. Is the viewport meta tag really necessary?
  10. How to create color shades using CSS variables similar to darken() of Sass?
  11. Flushing footer to bottom of the page, twitter bootstrap
  12. Universal selector * and pseudo elements
  13. Segments in a circle using CSS3
  14. @font-face src: local – How to use the local font if the user already has it?
  15. Add a text suffix to
  16. html5 vertical spacing issue with
  17. How to change color of icons in Font Awesome 5?
  18. iPhone Web App – Stop body scrolling
  19. Changing :hover to touch/click for mobile devices
  20. How to create an irregular square shape in css?
  21. How to make Google Fonts work in IE?
  22. Custom.css has stopped working in 32.0.1700.76 m Google Chrome update
  23. CSS: How to align vertically a “label” and “input” inside a “div”?
  24. What disadvantages are there to the tag?
  25. LESS mixin a variable class name
  26. Media Query grouping instead of multiple scattered media queries that match
  27. Do I not understand the flex-grow property?
  28. Creating CSS3 Circles connected by lines
  29. Keep background image fixed during scroll using css
  30. How to keep :active css style after clicking an element

Leave a Comment