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

Increasing the identifier of duplicated input fields using jQuery

Using JavaScript to display content on the page after handling a form

Issue with Bootstrap 4 Multi Select Functionality in Modal Not Functioning

Is there a way for me to manage the appearance of the printed document's layout?

Bootstrap 4 and Angular 7 application experiencing issues with toggle button functionality in the navigation bar

Discover the process of creating a dynamic mailto link using AJAX and HTML

Troubleshooting a WordPress Blog Homepage CSS Dilemma

Iterate through the contents of a directory and display the HTML content corresponding to each file

Spacing for Bootstrap Navbar List Items

The Jquery Mobile 1.4.5 virtual keyboard on the device is causing the form inputs at the bottom of the page to become hidden

Enhancing the Appearance of MUI Date Calendar

The battle between dynamic PDF and HTML to PDF formats has been a hot

Trigger Click event when clicking on navigation link using the ID

Need help with JQuery mouseOver fading in twice when you only want it to fade in

What is the best way to include interactive text on an image?

Transform Unicode characters into HTML using Qt

What is the best way to include a swf video in a list of hyperlinks?

creating an HTML table from JSON data using a specific key

What is the best way to create a box-shadow with an inset effect and a touch of

Replicate the action of clicking on the download button in R