Incorporating a Bootstrap table within another table and adjusting the table height

I am facing a minor issue on my website. I am utilizing bootstrap 4 and within the table box, I have nested another table as shown in the image below. How can I adjust the height of the inner table to match the height of the box (td)?

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

Here is the HTML code:

<table class="table table-bordered">
   <tbody>
      <tr>
         <td>REVERT</td>
         <td>
            <table class="table" style="height: 100%">
               <tbody>
                  <tr>
                     <td>Name</td>
                     <td>LONG TEXT</td>
                  </tr>
               </tbody>
            </table>
         </td>
      </tr>
   </tbody>
</table>

Browser view: https://i.sstatic.net/QmxTB.png https://i.sstatic.net/0Zy7k.png

htmlcsshtml-tabletwitter-bootstrap-4

Answer №1

To eliminate the margin-bottom attribute in the table due to the CSS property, you should introduce a custom CSS override:

<table class="table table-bordered">
   <tbody>
      <tr>
         <td>REVERT</td>
         <td>
            <table class="table table-no-margin" style="height: 100%">
               <tbody>
                  <tr>
                     <td>Name</td>
                     <td>LONG TEXT</td>
                  </tr>
               </tbody>
            </table>
         </td>
      </tr>
   </tbody>
</table>
<style>
    .table-no-margin { margin: 0 }
</style>

Answer №2

The reason for this issue is due to the margin-bottom of 1rem set on your nested table, which is part of the default Bootstrap CSS. Simply override this property to resolve the problem.

Here is a working example:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<table class="table table-bordered">
   <tbody>
      <tr>
         <td>REVERT</td>
         <td>
            <table class="table" style="height: 100%; margin-bottom:0px;">
               <tbody>
                  <tr>
                     <td>Name</td>
                     <td>LONG TEXT</td>
                  </tr>
               </tbody>
            </table>
         </td>
      </tr>
   </tbody>
</table>

Answer №3

This query has been addressed multiple times, yet I will provide a tailored solution for your particular case. It's not simply about eliminating padding or margins.

To achieve a table with 100% height, the container must also have a height of 100%. Therefore, in this scenario, ensure that the containing td is set to height: 100%...

Check out the demonstration on Codeply

       <td>REVERT</td>
       <td style="padding:0;height: 100%;">
           <table class="table" style="height: 100%">
                <tbody>
                     <tr>
                        <td>Name</td>
                        <td>LONG TEXT</td>
                     </tr>
                </tbody>
           </table>
       </td>

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

What is the best way to design a form with two dropdown menus, where the options in the second dropdown menu are determined by the selection made in the first dropdown menu

Is it possible to create two select menus using one dictionary in Django, where the values in the second menu are dependent on the key selected in the first menu? In my Django views.py file, I've constructed a dictionary with Projects as keys and cor ...

jquerypythonhtmlcssdjango

Having difficulty specifying numerical entries only

I have been attempting to create an input field that only accepts numbers, but for some reason it still allows letters to be entered. Why is this happening? <input type="number" pattern="[0-9]" ...

javascriptangularjshtml

inserting picture within the code

Looking for some feedback on this: I decided to use a third-party image host to create the code (I've used them in the past). However, when I added the code to my page where I intended it to be (after verifying in Google Inspect), the image does not a ...

htmlimage

javascript Incorrectly using location.reload will not refresh the page as intended

My goal is to refresh a page every time a user clicks a button so the page reverts back to its original source code. However, I am facing an issue where the location.reload() function is being executed after the code instead of at the beginning. btn.addEve ...

javascripthtmlonclickonclicklistenerreload

Issue with Bootstrap contact form functionality in PHP not working

I have experience in coding HTML and PHP, but unfortunately, [email protected] (mail address) is still unable to receive emails from my website (http://cloudsblack.info/) and when I click the submit button, it leads to a blank page (http://cloudsblack.info ...

phphtmltwitter-bootstrapcontact-form

Incorporating Stripe: Enhancing Online Payments through Redirected Checkout

I am currently in the process of upgrading our checkout system to be SCA compliant. According to the documentation, I must utilize PaymentIntents for this purpose. I have followed the steps outlined in their document found at: https://stripe.com/docs/payme ...

javascriptjavahtmlstripe-payments

In order to design a v-btn-toggle with vertically aligned buttons, rather than horizontally

I'm currently in the process of developing a quiz using VueJS and Vuetify. My challenge lies in organizing the answer options vertically for the user to select. I attempted to utilize the v-btn-toggle component, but encountered an issue where the butt ...

cssvue.jsvuetify.js

Issues with jQuery .on() hover functionality in HTML5 select element not being resolved

I'm currently working on capturing the event triggered when the mouse hovers over a select box, regardless of whether it's collapsed or expanded. My approach involves using .on() in the following manner: $(document).on('hover', "select ...

javascriptjqueryhtml

Updating image on click in CSS and HTML

How can I change the image to display a different picture when clicked? I currently have a green image that, upon clicking, switches pages and transforms into a white image. Before Click https://i.sstatic.net/wBVCL.png After Click https://i.sstatic.net/Z ...

htmlcssnext.js

Several iFrames embedded on the website automatically adjust to the same pre-set height

Apologies if this question has already been addressed, but I am struggling to properly articulate it. Here's the issue: I have a client's holiday accommodation website that uses three embedded iFrames for a Calendar, Booking Enquiry, and floorpla ...

javascriptjqueryhtmlcssiframe

Utilizing jQuery to apply a class to an element and modify the CSS parameters with custom values simultaneously

Unsure if this idea is feasible, but I'll attempt to explain my requirements. I am interested in accomplishing something like the following: A CSS class with variables X, Y, and Z left undefined: .r {border-radius:Xpx;-webkit-border-radius:Ypx;-moz ...

jquerycss

I seem to be having trouble getting my style to work properly with Material UI's makeStyles

I am experiencing an issue with Material-UI makeStyles not working properly. I am trying to apply my CSS style but it doesn't seem to be taking effect. I suspect that Bootstrap or MaterialTable might be causing this problem. While Bootstrap4 works fin ...

cssbootstrap-4material-uimaterial-table

Replicate the anchor's functionality (opening in a new window when 'ctl' is pressed) when submitting a form

I have a question that may seem unconventional - Is there a graceful method to replicate the functionality of an anchor tag when submitting a form? I want users to be able to hold down the control key while submitting a form and have the result open in a ...

javascripthtmlforms

Retrieving plain text content from HTML while preserving both ordered and unordered lists in Node.js

My goal is to extract plain text from HTML code while preserving the numbering from ordered or unordered lists. However, existing libraries like node-html-parser and cheerio do not maintain this information. To clarify, consider the following HTML: < ...

htmlnode.js

What is causing the Jquery form submit event to not trigger?

I am attempting to use jQuery to submit a form. I need the form submit event to be triggered when jQuery submits the form. However, the submit event handler is not being called successfully after the form is submitted. Here is the code snippet: <html ...

javascriptjqueryhtml

A static iframe or an alternative solution that is not interactive

I specialize in creating websites for my clients. When they log in, they are presented with 5 different design ideas for their site - each showcasing a unique layout and color scheme. Currently, I manually upload 5 screenshots of the designs created by me ...

phphtmliframeprintscreennon-interactive

Reposition all other elements of the HTML body after collapsing the Bootstrap section

I am facing an issue with Bootstrap where every time I click on a collapse element, the rest of the body moves up or down. Is there a way to prevent this from happening? Here is an example of my code: <body> <div class="panel-group"> ...

htmltwitter-bootstrap

The jQuery toggle function seems to be skipping alternate items

I have recently started learning Javascript and JQuery. Currently, I am working on creating a comment system where you can click reply to display the form. However, I'm facing an issue where the form only shows up for the first comment reply, not for ...

javascriptphpjqueryhtml

What steps can I take to address security issues related to iframes?

Are there other security risks to consider when using iframes besides XSS vulnerabilities? How can I ensure that my website is secure when utilizing iframes? I've seen some JavaScript code that uses top.window, but I'm hesitant to rely on client ...

javascripthtmliframexhtml

The JavaScript-generated form element will not be included in the data submitted through the POST method

While it may appear that this question has been asked before, my specific inquiry seems to be unique as I have not found a similar answer in other threads. Therefore, I am initiating a new discussion. My issue revolves around a form which contains a link ...

javascriptjqueryhtmlforms