Table within a fieldset and legend that scrolls

Question

Table within a fieldset and legend that scrolls

I am experiencing an issue with a table that is nested in a fieldset. The problem arises when the height of the table exceeds the height of the fieldset, causing a left scrollbar to appear. However, the <legend> element scrolls along with the table instead of remaining fixed.

<fieldset>
  <legend>Header</legend>
  <table>
    <tr>
      <td>Val 1<td>
    </tr>
    <tr>
      <td>Val ....<td>
    </tr>
    .......
  </table>
</fieldset>

<fieldset {
    border: 1px solid lightgrey; 
    padding: 20px; 
    border-radius: 8px;
    background: #f9f9f9; 
    padding: 5px;
    height: 280px;
    max-height: 280px;
    vertical-align: top;
    font-size: 11px;
    overflow-y: auto;
}

Can anyone advise on how to prevent the <legend> element from scrolling along with the table?

html css fieldset

Answer 1

Answer №1

If you want to achieve a different layout, consider using an alternative wrapper structure like this:

HTML

 <div class="container">
    <h2>Title</h2>
    <ul class="my-list">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
    </ul>
</div>

CSS

.container {
    background-color: #f9f9f9;
    border: 1px solid lightgrey;
    border-radius: 8px;
    padding: 20px;
}
.my-list {
    list-style: none;
    overflow-y: auto;
    height: 50px;
    max-height: 50px;
    font-size: 11px;
}

Example: Try it out on jsFiddle

Answer 2

If you want to achieve a different layout, consider using an alternative wrapper structure like this:

HTML

 <div class="container">
    <h2>Title</h2>
    <ul class="my-list">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
    </ul>
</div>

CSS

.container {
    background-color: #f9f9f9;
    border: 1px solid lightgrey;
    border-radius: 8px;
    padding: 20px;
}
.my-list {
    list-style: none;
    overflow-y: auto;
    height: 50px;
    max-height: 50px;
    font-size: 11px;
}

Example: Try it out on jsFiddle

Table within a fieldset and legend that scrolls

Answer №1

Similar questions

Instructions on how to save HTML "innerHTML" along with attributes to a text document

Different choices for data attributes in React

Achieving Perfect Alignment of Images Using HTML and CSS

Troubleshooting problem with Bootstrap media object in CSS

Photo Collection: Incorporating Images

What is the best way to extract a specific data point from a website?

React counter variable failing to increment

changing background color smoothly in a short time without using JQuery

Troubleshooting Hierarchical Ordering in Django-MPTT's recursetree Function

Once the final row in the table is removed, the width of the second cell in the top row will be set to 0

Retrieving data from an HTML Table using Javascript

Image pop-ups that overlay text on the homepage

What is the best way to ensure that two div elements remain next to each other even when one has a fixed size?

Simultaneously opening the second submenu and closing the previous submenu with a height transition results in the second submenu being positioned off-screen

What is the best way to add a CSS link if a request is not made using AJAX?

Adjust the scrollbar color when hovering over a particular div

Press on Selenium with Python

The :focus pseudo-class is failing to target the input element

Revamp the Bootstrap 4 Form Check: Rearrange Options from left-to-right and top-to-bottom to top-to-bottom and left-to-right

Utilize AngularJS $sanitize to convert characters into HTML code