Unable to create a button within a table that spans 100% height of the column

Hello, I'm encountering an issue with a table while using bootstrap. The table contains columns, some filled with data and some empty. Each column needs to have a button, even the empty ones. However, I am struggling to get the buttons in the columns to be 100% of the height of the td. One requirement is that each td contains a div, and within that div is the button. The structure looks like this:

<tr>
 <td>
   <div> //THIS DIV IS IMPORTANT - I am using the react-bootstrap framework and the Button component includes this div inside 
     My text data, whether empty or not
   </div>
 </td>
</tr>

I have tried removing paddings, setting the div and buttons to 100% height and width, but the button height still isn't 100%. Can you please help me identify the problem?

You can find the code here on jsfiddle.

I had previously included a broken link, but it should be working now.

htmlcssbootstrap-4

Answer №1

Upon reviewing your fiddle, I have identified a couple of key points:

  1. To rectify the issue, you should replace the Bottom element with button.

  2. Bootstrap's styles are influencing your design. To overcome this, utilize the !important rule for quick overrides.

One effective approach is to insert: 

table th, table td {padding: 0!important;}
followed by setting button {height: 100%} to achieve the desired outcome.

For further insights on bootstrap tables, refer to the official documentation.

Answer №2

The reason why the button cannot reach 100% height is due to the padding applied to the table's th and td elements.

.table td, .table th {
  padding: 0;
}

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

Step-by-step guide on duplicating a div a set number of times

I am looking to replicate the entire div multiple times (e.g., on an A4 paper, top left corner, top right corner, bottom left corner, and bottom right corner). <script language="javascript" type='text/javascript'> function updateD ...

javascriptasp.netcss

Sending Arguments to Shiny RMarkdown

After spending several days attempting to import data into a shiny rmarkdown file, I finally decided to seek help here. I am exploring different methods to achieve my goal, but it's crucial that the final product can be accessed through a website. Th ...

htmlrshinyr-markdownparameters

Python web scraping: extracting data from li and span elements

My current HTML document structure is as follows: I have a BeautifulSoup object called page_soup, and I am attempting to extract data from a list element. The elements within the list look something like this: <ul class> <li> <a href="h ...

pythonhtmlweb-scrapingbeautifulsoup

What is the best way to place two span elements beside each other?

Is there a way to align the name and address on the same line, with the address positioned on the right and the name on the left? Currently, the address is appearing on a separate line from the name. How can I resolve this issue? Here is the provided cod ...

htmlcss

Applying CSS3 flex styles to elements cascading downwards: A guide

After stumbling upon CSS3's display: flex; property, I decided to implement it in my website's sticky header. However, I encountered a problem. The main objective was to evenly distribute all links across the entire width of the header, but achi ...

htmlcssflexbox

React select and react modal cannot be overlaid on top of each other

I am facing an issue with my React modal that contains a react-select component. Some of the options at the bottom of the modal are not visible. How can I ensure that the select overlay appears on top of the modal to display all options? https://i.sstatic. ...

javascriptcssreactjs

What could be the reason for the malfunction of my flexbox layout?

I need to create a layout with three divs in a row. The first div should have a fixed width, the second div should expand until it reaches a "max-width", and the third div should take up the remaining space. Everything works fine until the text inside the ...

htmlcssflexbox

What is the reason for Firefox and Opera disregarding the max-width property when used within display: table-cell?

When viewing the code below, you may notice that it displays correctly in Chrome or IE with the image set to be 200px wide. However, in Firefox and Opera, the max-width style seems to be completely ignored. Is there a reason for this inconsistency across b ...

htmlcsscss-tables

Ways to revamp the overall aesthetic of the entire project

Is there a way to change the colors of all elements in a project when a user checks a checkbox, without having to add a class to each element? Perhaps using a service or a different method? ...

css

Discovering descendant div elements

I've been conducting some research, but I'm struggling to find a specific answer for this. Here is the HTML code snippet: <div class="collapsingHeader"> <div class="listItemWrapper"> <div class="itemWrapper"> ...

javascriptjquerycss

Building a hyperlink from a textbox input: A step-by-step guide

I am attempting to modify the href of my link based on the content of the textbox with id="serie". However, Firefox is indicating that el is null. Can you help me identify where the issue lies? (The top section is the Page, the middle part shows the debug ...

javascripthtmlonchangegetelementbyidonkeyup

How can certain HTML be redirected or hidden for users on mobile devices?

Lately, I've been putting the final touches on my website to present to potential employers as I will soon be starting my job search after graduation. I recently added an "about" section with parallax scrolling effect, but unfortunately, it's not ...

javascriptjqueryhtmlcss

Creating a custom layout for displaying blog post previews with Django and CKEditor

I am currently using Python + Django for my blog. Previously, I manually added a custom HTML tag <post_cut/> to create a blog post preview and used Python slice to display only the preview. This method helped me avoid issues with fixed length preview ...

htmldjangockeditorckeditor4.x

What is the best way to seamlessly transition from responsive design to mobile design?

While developing a single-page app, I encountered an issue with the layout when the screen width reaches a specific point. On narrow screens, I prefer to utilize the full width, but for wider screens, I want to limit the width for better readability. The l ...

htmlcsssafari

Sending Javascript Variable through Form

I'm a newcomer to JavaScript and struggling to solve a particular issue in my script. I need help passing the variable "outVal" to a PHP script when the submit form is clicked. The value of "outVal" should come from the "output" value in the script. I ...

javascripthtmlforms

The functionality of Dompdf's style does not seem to be functioning properly

I've been experimenting with dompdf and while my script successfully generates a PDF document, the style tag seems to have no effect. Here's my code. I'm familiar with how it operates and have used it with pure HTML before, but this is my fi ...

phpcssdompdf

Utilizing the power of jQuery alongside Angular 4

I am trying to display a bootstrap modal but keep encountering an error message: SectionDetailComponent.html:54 ERROR TypeError: $(...).modal is not a function This is how my .angular-cli file looks like: "scripts": [ "../node_modules/jquery/dist/jq ...

jqueryangulartypescriptbootstrap-4

Why doesn't the HTML tag function inside a <textarea> element?

Check out this code snippet: <textarea rows='15' cols='90' name="activities"> <?php echo "<p style='color: green;'>text area is here</p>"; ?> </textarea> The current output is <p ...

phphtmltextarea

navigating through divs hidden beneath other divs

Trying out a new map interface here where the entire screen is covered by a (Google) map and my app chrome (not sure what else to call it - menus, controls, etc.) float or fade away when not needed. Check out this experimental interface. After the page fu ...

htmlcss

Tips for arranging all content within React-Bootstrap cards using flexbox

In my project using React Bootstrap, I have movie cards that include images, text, and buttons. However, the content inside the cards keeps overflowing, and I need all cards to have equal height. The project was initially built with Bootstrap during a boot ...

cssreactjsflexboxreact-bootstrapcard