Tips for setting a specific height for an HTML table

Question

Tips for setting a specific height for an HTML table

For some reason, I can't seem to control the height of this table. I've set it to a maximum of 20px but all the rows are still showing.

Here is the CSS:

table {
    border:1px solid black;
    overflow:hidden;
    height:20px;
    max-height:20px;
}

And here is the HTML code:

<table>
    <tr><td>This is a row</td></tr>
    <tr><td>This is a row</td></tr>
    <tr><td>This is a row</td></tr>
    <tr><td>This is a row</td></tr>
    <tr><td>This is a row</td></tr>
    <tr><td>This is a row</td></tr>
    <tr><td>This is a row</td></tr>
    <tr><td>This is a row</td></tr>
</table>

You can view an example at this link.

html css

Answer 1

Answer №1

To enhance the table's appearance, include display:block; in its CSS style:

table {
  border: 1px solid black;
  overflow: auto;
  height: 20px;
  max-height: 20px;
  display: block;
}

<table>
  <tr>
    <td>this is a row</td>
  </tr>
  <tr>
    <td>this is a row</td>
  </tr>
  <tr>
    <td>this is a row</td>
  </tr>
  <tr>
    <td>this is a row</td>
  </tr>
  <tr>
    <td>this is a row</td>
  </tr>
  <tr>
    <td>this is a row</td>
  </tr>
  <tr>
    <td>this is a row</td>
  </tr>
  <tr>
    <td>this is a row</td>
  </tr>
</table>

If you wish to control the width of the table, you can set an explicit value after adding the display property:

table {
  border: 1px solid black;
  overflow: auto;
  height: 30px;
  max-height: 30px;
  display: block;
  width: 200px;
}

<table>
  <tr>
    <td>this is a row</td>
  </tr>
  <tr>
    <td>this is a row</td>
  </tr>
  <tr>
    <td>this is a row</td>
  </tr>
  <tr>
    <td>this is a row</td>
  </tr>
  <tr>
    <td>this is a row</td>
  </tr>
  <tr>
    <td>this is a row</td>
  </tr>
  <tr>
    <td>this is a row</td>
  </tr>
  <tr>
    <td>this is a row</td>
  </tr>
</table>

Answer 2

To enhance the table's appearance, include display:block; in its CSS style:

table {
  border: 1px solid black;
  overflow: auto;
  height: 20px;
  max-height: 20px;
  display: block;
}

<table>
  <tr>
    <td>this is a row</td>
  </tr>
  <tr>
    <td>this is a row</td>
  </tr>
  <tr>
    <td>this is a row</td>
  </tr>
  <tr>
    <td>this is a row</td>
  </tr>
  <tr>
    <td>this is a row</td>
  </tr>
  <tr>
    <td>this is a row</td>
  </tr>
  <tr>
    <td>this is a row</td>
  </tr>
  <tr>
    <td>this is a row</td>
  </tr>
</table>

If you wish to control the width of the table, you can set an explicit value after adding the display property:

table {
  border: 1px solid black;
  overflow: auto;
  height: 30px;
  max-height: 30px;
  display: block;
  width: 200px;
}

<table>
  <tr>
    <td>this is a row</td>
  </tr>
  <tr>
    <td>this is a row</td>
  </tr>
  <tr>
    <td>this is a row</td>
  </tr>
  <tr>
    <td>this is a row</td>
  </tr>
  <tr>
    <td>this is a row</td>
  </tr>
  <tr>
    <td>this is a row</td>
  </tr>
  <tr>
    <td>this is a row</td>
  </tr>
  <tr>
    <td>this is a row</td>
  </tr>
</table>

Tips for setting a specific height for an HTML table

Answer №1

Similar questions

Submitting data through a PHP server-side script

Hover effect not activating on image within modal

Visual Latency when Quickly Toggling Between Images in Succession

Creating an HTML element that can zoom, using dimensions specified in percentages but appearing as if they were specified in pixels

Tips for incorporating border/outline/stroke into SVG elements using CSS

Modifying form data when submitting a form

Exploring the differences between Zurb Foundation 6's app.scss and _settings.scss files

Why does one image render while the other with the same src does not?

Preventing selection of past dates with Material UI in ReactJS

Create a design where the logo seems to be suspended from the navigation bar using bootstrap

Update the table in a few moments

What is the best way to line up my columns when they are split between groups of three and two?

The ng-repeat ng-switch combination is not functioning as expected

Instructions on submitting a form containing multiple select lists using the enter key

Storing checkbox status in Angular 7 with local storage

How can I remove the div container every time the submit button is clicked?

I am having trouble displaying my mysqli table correctly. I could use some help troubleshooting my code as I am unable to locate the error

Make sure to keep "display:inline-block" in place while using fadeTo()

Modifying the CSS style of an element on PageA by clicking a button on PageB

Is it possible for CSS to accurately crop images by pixels [Sprite Box]?