there is no minimum height specified for the table

Hey there! I'm working on a dynamic table that I populate using data from my API. However, I'm facing an issue where I want the table to maintain a minimum height when there are only a few results, but I can't seem to make it work.

I attempted to set the min-height to calc(100% - 60px) in my CSS to ensure that the table always has that minimum height, but it doesn't work as expected when the number of entries is low:

https://i.sstatic.net/XIivT.png

CSS in JavaScript:

/* Styles */

export const DepartamentMain=styled("div")` min-height: calc(100% - 60px) !important;
width: 100%;
padding: 0 20px;
`;
export const TableContent=styled("div")` box-shadow: 0 0 0 1px rgb(63 63 68 / 5%),
0 1px 2px 0 rgb(63 63 68 / 15%);
border-radius: 4px;
height: 100%;
`;
export const ResponsiveTable=styled("table")` width: 100%;
margin: 0;
padding: 0;
border-collapse: collapse;
border-spacing: 0;
.paddingCheckbox {
  width: 48px;
  padding: 0 0 0 4px !important;
  color: #263238;
  font-weight: 500;
  line-height: 1.5rem;
  font-size: 0.875rem;
  text-align: left;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
}

tr {
  color: inherit;
  display: table-row;
  outline: 0;
  vertical-align: middle;
  border-spacing: 0;
  border-collapse: collapse;
}

.tr-head {
  th {
    border-bottom: 1px solid rgba(224, 224, 224, 1);
    letter-spacing: 0.01071em;
    vertical-align: inherit;
    display: table-cell;
    padding: 16px;
    font-size: 0.875rem;
    text-align: left;
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    color: #263238;
    font-weight: 500;
    line-height: 1.5rem;
  }
}

.root {
  padding: 9px;
  flex: 0 0 auto;
  overflow: visible;
  font-size: 1.5rem;
  text-align: center;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  border-radius: 50%;
  display: inline-flex;
  border: 0;
  cursor: pointer;
  margin: 0;
  position: relative;
  align-items: center;
  user-select: none;
  justify-content: center;
  vertical-align: middle;
  background-color: transparent;
}

thead {
  visibility: visible;
  background: #fff;
}

tbody {
  display: table-row-group;
  vertical-align: middle;
  border-color: inherit;
  border-collapse: collapse;
  border-spacing: 0;
  visibility: visible;
  background: #fff;
  td {
    display: table-cell;
    padding: 16px;
    font-size: 0.875rem;
    text-align: left;
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    font-weight: 400;
    line-height: 1.43;
    border-bottom: 1px solid rgba(224, 224, 224, 1);
    letter-spacing: 0.01071em;
    vertical-align: inherit;
  }
}
<div style={{ height: "100%", padding: 60 }} className="App">
  <DepartamentMain>
    <TableContent>
      <ResponsiveTable>
        <thead>
          <tr className="tr-head">
            <th className="paddingCheckbox">
              <span className="root">
                        <input name="select-all" value="ALL" />
                      </span>
            </th>
            <th>title 1</th>
            <th>tittle 2</th>
            <th>tittle 3</th>
            <th>tittle 4</th>
            <th>tittle 5</th>
          </tr>
        </thead>
        <tbody>{renderDataList()}</tbody>
      </ResponsiveTable>
    </TableContent>
  </DepartamentMain>
</div>

javascripthtmlcss

Answer №1

//.       <thead>
//          <tr className="tr-head"> // modify to "table table-striped"
//            <th className="paddingCheckbox">
//              <span className="root">
//                        <input name="select-all" value="ALL" />
//                      </span>
//            </th>
//            <th>title 1</th> // change to <th scope="col"></th to all 
//                                  of it.
//          <th>tittle 2</th>
//          <th>tittle 3</th>
//          <th>tittle 4</th>
//          <th>tittle 5</th>
//          </tr>
//        </thead>

Attempt using 'col' and update the 'tr' as per the suggested changes for automatic update

Answer №2

Give my suggestion a try, buddy.

<tr className="tr-head"> -> <tr className="table table-striped">

<th>title 1</th> -> <th scope="col">title 1</th>
<th>title 2</th> -> <th scope="col">title 2</th>
<th>title 3</th> -> <th scope="col">title 3</th>
<th>title 4</th> -> <th scope="col">title 4</th>
<th>title 5</th> -> <th scope="col">title 5</th>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Mastering ReactJs: The Ultimate Guide to Updating State Properties

I've been attempting to change the isSelected property for a specific row in my state data, but am finding that it's not updating. Can someone please offer guidance on the most effective approach to achieve this? var selecte ...

javascriptreactjs

What is the best way to enable this image lightbox to function seamlessly with both horizontal and vertical images?

Looking to create a responsive image lightbox? After starting from an example on W3Schools (https://www.w3schools.com/howto/howto_js_lightbox.asp), I ran into issues with portrait oriented images. Ideally, the solution should handle both landscape (e.g., 1 ...

htmlcss

Error encountered while compiling a method within a .vue component due to a syntax issue

I have been closely following a tutorial on Vue.js app development from this link. The guide instructed me to add a login() function in the block of the Login.vue file. Here is the snippet of code provided: login() { fb.auth.signInWithEmailAndPa ...

javascriptvue.jswebpackvuejs2vue-component

Is there a way to incorporate vue samples into an independent HTML document?

Striving to broaden my knowledge of Vue, I set out to create a page with tabs inspired by one of the Vue examples available at . However, an obvious error seems to be eluding me, as I encounter a syntax issue on the line import * as Tabs from 'vue-s ...

javascriptvue.js

Using Node.js for a game loop provides a more accurate alternative to setInterval

In my current setup, I have a multiplayer game that utilizes sockets for asynchronous data transfer. The game features a game loop that should tick every 500ms to handle player updates such as position and appearance. var self = this; this.gameLoop = se ...

javascriptnode.jstimergame-loop

Is it possible to instruct Vue to prioritize the inherited class over others?

I have a situation in my component where I need Vue to disregard the existing class and instead use the inherited class, but only if it is of the same type as the inherited class. Let me illustrate with an example: Consider a button component like this M ...

htmlcssvue.jsvuejs3tailwind-css

Cut out a passage by using a polyline shape

I am looking to create a unique effect by clipping a text like a heading1 using an svg polyline. The concept is to place the H1 text behind the polyline background and make it appear frosted or blurred. I have successfully achieved this in the past but see ...

csssvg

A different option for incorporating interactive external content without using iframes

Excuse me for asking if this question has already been answered, but I was unable to find a solution that fits our specific needs. Is there a more effective method than using an iframe to embed external content in a website? Our objective is to provide a ...

jqueryhtmltwitter-bootstrapiframecoldfusion

Transfer files using Ajax and FormData technique

I have extensively researched various topics on this issue and prefer not to rely on any external plugins. function addToDatabase(menuItem){ var formData = new FormData(); formData.append("Description", document.getElementById("DescriptionID").value); ...

javascriptphpajax

tips for dynamically highlighting search bar after choosing a different dropdown option - vuejs

I need to filter products in my application based on name and category. To achieve this, I have included a search text box and a dropdown select box. The dropdown select box offers two options: 1. Search products by name 2. Search products by category name ...

javascriptvue.jsvuejs2

Is this an effective and appropriate method for establishing media queries?

<link id ="style" rel="stylesheet" type="text/css" title="other" href="regularStyles.css" /> <link rel="stylesheet" media= "all and (mid-width: 767px) and (max-width:2049px) and (min-height:767px) and (max-height: 1538px)" href="notePads.css" /& ...

htmlcssmedia-queriesstylesheet

Could you explain the distinction between push and offset within the grid system?

I'm currently diving into the world of Bootstrap grids and trying to wrap my head around the concepts of push and offset. In the showcase below, I have two rows that only differ in how the third column is positioned - one using a push and the other an ...

csstwitter-bootstrapuser-interfacetwitter-bootstrap-3

Are the dimensions of <TD> and <table> not displaying properly?

I've encountered a peculiar issue that I need help with. Here is the Fiddle link: http://jsfiddle.net/H3W4X/ If you want to view it in fullscreen: http://jsfiddle.net/H3W4X/embedded/result/ This is the code snippet causing trouble: <div id="wor ...

jquerycsshtml-table

What is the process of adding background color to text?

Is there a more efficient way to style this text without relying on the span tag? I am looking to add a background color to my text. Code: .subject { color: gold; background: gray; } <h2>Some Subjects</h2> <ol> <li style="bac ...

htmlcss

Is there a way to conceal a Select element so that it is not visible on the screen, yet can still activate the dropdown menu when another element is clicked

One idea for my website is to replace a select element with a button that triggers the dropdown. The plan is to place the select element inside a button DIV, position the select element on top of the button, and set its opacity to 0 so it appears hidden. W ...

htmlcssdrop-down-menu

Struggling with implementing Angular and TypeScript in this particular method

I'm dealing with a code snippet that looks like this: myMethod(data: any, layerId: string, dataSubstrings): void { someObject.on('click', function(e) { this.api.getSomething(a).subscribe((result: any) => { // ERROR CALL 1. It ...

javascriptangulartypescript

Using Angular to send data to a WCF JSON endpoint

I've been trying to send a request to a WCF JSON service endpoint from Angular, but I haven't had any luck so far. The service has been tested through other methods and is functioning properly for the specified URL. When checking with Firebug, I ...

javascriptjsonweb-serviceswcfangularjs

Understanding how to activate a React navbar button is essential for creating a seamless user

How can I make my sidebar button change color when I navigate to the page it links to? ...

javascripthtmlsassreact-redux

Unable to establish connection with remote database server on Hostinger platform

I've been encountering this persistent error that I can't seem to resolve. I developed my project locally, utilizing a local database. Upon completion, I attempted to manually migrate my database to my hosting provider since it's relatively ...

javascriptmysqlnode.jsexpress

Combining Angular and Bootstrap: how to create two overlapping divs

Looking to enhance a project in Angular 15 + bootstrap 5 by creating two draggable divs where the lower one can be vertically resized to overlap the upper one? I've managed to set up most of it, but when dragging the lower div, its transparency makes ...

htmlcssangularbootstrap-5