How to Set Maximum Height for Table-Cell

How to set maximum height for table-cell?

By CSS 2.1 rules, the height of a table cell is “the minimum height required by the content”. Thus, you need to restrict the height indirectly using inner markup, normally a div element (<td><div>content</div></td>), and set height and overflow properties on the the div element (without setting display: table-cell on it, of course, as that would make its height obey CSS 2.1 table cell rules).

Setting max-height for table cell contents

We finally found an answer of sorts. First, the problem: the table always sizes itself around the content, rather than forcing the content to fit in the table. That limits your options.

We did it by setting the content div to display:none, letting the table size itself, and then in javascript setting the height and width of the content div to the inner height and width of the enclosing td tag. Show the content div. Repeat the process when the window is resized.

Max-height of table-cell

When the height property is applied to table cells (whether using native tags like <td> or CSS enabled like display: table-cell), it is interpreted as a minimum value.

A table cell's height will expand as needed to accommodate the content, and that will in turn, determine the height of the table row containing the cell.

Reference: http://www.w3.org/TR/CSS2/tables.html#height-layout

How to Fix a Height in a Table Cell

One way of set a fixed height within a table cell is by using a wrapper for the table cell's content:

<div id="table">
    <div id="table-cell1">
        <div class="inner-cell">table cell 1</div>
    </div>
    <div id="table-cell2">
        <div class="inner-cell">table cell 2
            <br/>Table
            <br/>Cell</div>
    </div>
</div>

and apply the following CSS:

body {
    margin: 0
}
#table {
    display: table;
    width: 100%;
    height: 30px;
    /* ignored */
}
#table-cell1 {
    display: table-cell;
    width: 80px;
    background-color: yellow;
}
#table-cell2 {
    display: table-cell;
    background-color: gray;
    color: white;
}
.inner-cell {
    border: 1px dashed blue;
    height: 30px;
    overflow: auto; /* optional: if needed */
}

The trick is to set a fixed (or max) height value for the block level container .inner-cell.

You can also set the overflow property if you need scroll bars and so on.

See demo fiddle: http://jsfiddle.net/audetwebdesign/mNcm5/

CSS Table set max row height

The problem is that when you fake a table in CSS, the elements don't all take on all properties that a real table would have. If you were to rewrite this as a real table, the problem wouldn't exist.

table {  border-spacing: 10px;  width: 300px;}td {  height: 50px;  background: yellow;}.table-cell-inner {  height: 50px;  max-height: 50px;  overflow: hidden;}.big {  font-size: 50px;}

<table>  <tr>    <td>      <div class="table-cell-inner">Test</div>    </td>    <td>      <div class="table-cell-inner big">Test</div>    </td>  </tr></table><div style="height: 50px; background: red;">Reference: This is 50px height.</div>

How to add a fixed height to a table cell?

table-cells won't work with overflow: hidden. Just wrap content in table-cell in div with max-height and overflow: hidden

tbody tr td div{
  max-height: 30px;
  overflow: hidden;
}

Setting a max height on a table

NOTE this answer is now incorrect. I may get back to it at a later time.

As others have pointed out, you can't set the height of a table unless you set its display to block, but then you get a scrolling header. So what you're looking for is to set the height and display:block on the tbody alone:

<table style="border: 1px solid red">
    <thead>
        <tr>
            <td>Header stays put, no scrolling</td>
        </tr>
    </thead>
    <tbody style="display: block; border: 1px solid green; height: 30px; overflow-y: scroll">
        <tr>
            <td>cell 1/1</td>
            <td>cell 1/2</td>
        </tr>
        <tr>
            <td>cell 2/1</td>
            <td>cell 2/2</td>
        </tr>
        <tr>
            <td>cell 3/1</td>
            <td>cell 3/2</td>
        </tr>
    </tbody>
</table>

Here's the fiddle.

How to set height of table cell display: table-cell

Use the following css..It will work for your requirement

td,th{ 
height:25px; 
}

CSS table-cell styled element: Maximum height (and overflow: hidden)

As far as I can see with this code, it appears you are using the table cell display in order to vertically align the text. However, table-cell comes with the inherent tradeoff that you lose control of the y-dimension; that is, the table-cell will ignore all height parameters, as you've seen.

The way to fix this would be to change the display sub-attribute from table-cell to inline-block. Then, in order to get the vertical centering, we can do the following: Place a pseudo-element inside the .table element and vertically align this. Vertical align needs to be relative to another inline element, so this pseudo-element gives a reference for the .cell to vertically align itself against. This should vertically align your text.

New output: http://jsbin.com/faqadumasado/1/edit?html,css,output

Article on "Centering in the Unknown" that describes the vertical centering technique above: http://css-tricks.com/centering-in-the-unknown/

How to set table cell width and height in Bootstrap tables

Bootstrap sets the table at 100% width, so you need to override that. Here is what I did:

table {
  table-layout:fixed;
  width: inherit !important;
}
td, th {
  width:150px !important;
  height:75px !important;
  max-width:150px !important;
  max-height:75px !important;
  min-width:150px !important;
  min-height:75px !important;
}

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>
<body>
  <table class="table table-bordered">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">First</th>
        <th scope="col">Last</th>
        <th scope="col">Handle</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td style="width:150px; height:75px">Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td colspan="2">Larry the Bird</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
  
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>

How to Set Maximum Height for Table-Cell