Ensuring consistent column height in HTML Tables

Hey there, I'm just starting out with CSS and I have a question about table design. I have three separate tables below and I want to ensure that all the columns in each table are of equal height. Is there an easy way to achieve this? Any suggestions or tips would be greatly appreciated. Thank you!

Check out my JSFiddle for reference.

<body>
        <div class="center">
            <table class="fruitsTable class">
                <thead>
                    <th>Fruits</th>
                </thead>
                <tbody>
                    <tr>
                        <td>Apples</td>
                    </tr>
                    <tr>
                        <td>Grapes</td>
                    </tr>
                    <tr>
                        <td>Oranges</td>
                    </tr>
                    <tr>
                        <td>Mango</td>
                    </tr>
                    <tr>
                        <td>Papaya</td>
                    </tr>
                    <tr>
                        <td>Banana</td>
                    </tr>
                    <tr>
                        <td>Kiwi</td>
                    </tr>
                </tbody>
            </table>
            <table class="fruitsTable2 class" >
                <thead>
                    <th>Fruits</th>
                </thead>
                <tbody >
                    <tr>
                        <td>Mango</td>
                    </tr>
                    <tr>
                        <td>Papaya</td>
                    </tr>
                    <tr>
                        <td>Banana</td>
                    </tr>
                    <tr>
                        <td>Kiwi</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>
htmlcss

Answer №1

Changing a table using CSS is possible, but not recommended.

If you want to experiment with this code, you can find it here. Or 

.fontcolor {
  color: #25BAD0;
}

.center {
  display: flex;
  justify-content: center
}

.class {
  font-family: Open Sans;
}
table,
table tr,
table tr td,
table tr th {
    border-collapse: collapse;
}
table {
  display: block;
  width: 25%;

  border:1px solid #25BAD0;
}

table tr,
table th,
table tr td,
table tbody,
table thead {
  display:block;
  width: 100%;
}
th {
  width:100%;
  color: #0080ff;
  font-weight: normal;
  border-bottom: 1px solid #25BAD0;
}

td {
  width: 100%;
  padding-top: 5px;
  padding-left: 8px;
}

.fruitsTable th { width:100%; }
<div class="center">
  <table class="fruitsTable class">
    <thead>
      <th>Fruits</th>
    </thead>
    <tbody>
      <tr>
        <td>Apples</td>
      </tr>
      <tr>
        <td>Grapes</td>
      </tr>
      <tr>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>Mango</td>
      </tr>
      <tr>
        <td>Papaya</td>
      </tr>
      <tr>
        <td>Mango</td>
      </tr>
      <tr>
        <td>Papaya</td>
      </tr>
      <tr>
        <td>Banana</td>
      </tr>
      <tr>
        <td>Kiwi</td>
      </tr>
    </tbody>
  </table>
  <table class="fruitsTable2 class">
    <thead>
      <th>Fruits</th>
    </thead>
    <tbody>
      <tr>
        <td>Mango</td>
      </tr>
      <tr>
        <td>Papaya</td>
      </tr>
      <tr>
        <td>Banana</td>
      </tr>
      <tr>
        <td>Kiwi</td>
      </tr>
    </tbody>
  </table>
  <table class="fruitsTable3 class">
    <thead>
      <th>Fruits</th>
    </thead>
    <tbody>
      <tr>
        <td>Banana</td>
      </tr>
      <tr>
        <td>Kiwi</td>
      </tr>
       <tr>
        <td>Banana</td>
      </tr>
      <tr>
        <td>Kiwi</td>
      </tr>
       <tr>
        <td>Banana</td>
      </tr>
      <tr>
        <td>Kiwi</td>
      </tr>
    </tbody>
  </table>
</div>

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

Creating a clickable map for a PNG image: Step-by-step tutorial

My goal is to create a interactive map similar to this one. Click here for the image ...

javascripthtmlclickable

Steps for extracting HTML content from a beautiful soup object

My current situation involves a bs4 object listing: >>> listing <div class="listingHeader"> <h2> .... >>> type(listing) <class 'bs4.element.Tag'> I am aiming to retrieve the raw html as a string. Initially, ...

pythonhtmlbeautifulsouphtml-parsing

Display the modal values in a hidden form field within a textarea, and then it will be automatically

Within my setup, there are two forms. The first form contains a textarea, while the second form appears in a modal. Below is the code for form 1. <div> <textarea name="dynamic-content-unit" id="dynamic-content-unit" class="for ...

jqueryhtmlformsbootstrap-modal

Divide a SINGLE BACKGROUND IMAGE in HTML into two separate links of equal size, one at the top and

As a beginner in HTML, I am trying to find a way to divide a background image into two equal sections without using image mapping. I attempted to split the links by setting the style to 0% and 50% to designate the top and bottom halves, but unfortunately, ...

javascripthtmlcsshtml5-canvas

Make sure that the webpage does not display any content until the stylesheet has been fully loaded by

I am seeking to utilize ng-href for loading different Themes. One issue I am encountering is that the unstyled content appears before the stylesheet is applied. I have created a Plunker where I made changes to Line 8 in the last 3 Versions for comparison ...

javascriptjqueryhtmlcssangularjs

What is the procedure for modifying the height of a button in HTML?

I wanted to add a flashing "Contact Us" button to the menu bar of my website to immediately attract people's attention when they visit. Here is the javascript code I used: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&g ...

javascripthtmlcssbutton

Eliminate any hyperlink mentions from the Media Print Screen

I'm experiencing a small issue where I am unable to remove the link reference from the print view. Below is the HTML code snippet: <table style="width: 436px; height: 374px;" border="0" cellpadding="5"> <tbody> <tr style=" ...

htmlcss

Troubleshooting: Magento checkout page keeps scrolling to the top

We are experiencing an issue where, during the one page checkout process, the next step is not automatically scrolling to the top of the page when it loads. After a user fills out all their billing information and clicks continue, the next step appears ha ...

javascriptjqueryhtmlcssmagento

Python Selenium: How to interact with an element nested within multiple HTML tags

Currently, I am working on automating a website using selenium webdriver in Python. However, I have encountered an issue when trying to click on a specific tag. The website that I am attempting to automate is quite old and contains numerous iframes and <& ...

pythonhtmlseleniumxpathwebautomation

Background image spacing

Can anyone explain why there is extra space after my background image in this code snippet? (red line in image highlights the spacing issue) Even though the background image doesn't have this space, it seems to extend beyond where the black color ends ...

htmlcss

What is the best way to align a jQuery Cycle 2 Slider in the middle of the

Having some trouble centering a jQuery Cycle 2 Slider on my page. You can see the slider here. I've attempted multiple methods to center it, but none have been successful. Check out the HTML code: <div class="slider"> <div id=outside> ...

jquerycssjquery-cycle2

PHP is failing to display line breaks when retrieving data from JSON sources

I have a JSON feed that is decoded by PHP using json_decode and then echoed onto my HTML page. The issue I am facing is that the feed contains \n characters, but when PHP echoes them out, they are not recognized as new lines or line breaks in HTML. In ...

phphtmljson

Issue with maintaining fixed space above navbar in HTML/CSS code

I'm struggling to make my navbar sticky on my website without any space above it. Can someone help me with this issue? Here is the URL to my site: My CSS looks like this: body { font-size: 12px; line-height: 22px; font-family: Arial, H ...

htmlcss

A tutorial on how to customize the hover effect for TableHead Column Identifiers in MaterialUI by adjusting

I'm struggling to customize the appearance of child th elements using the TableHead component from MaterialUI. While I've been successful in modifying various properties, I'm facing difficulty in changing the hover color. Below is the snipp ...

csstypescriptmaterial-ui

Disappearing Data in Chart.js When Window is Resized

I am utilizing the Chart.js library to present a line chart in a div that is enclosed within a <tr>. <tr class="item">...</tr> <tr class="item-details"> ... <div class="col-sm-6 col-xs-12 chart-pane"> <div clas ...

javascripthtmlcss

Inject a dynamic URL parameter into an iframe without the need for server-side scripting

I'm really stuck and could use some assistance with the following issue, as I am unable to solve it on my own :( When a user is redirected to a form (provided via an iframe), there is a dynamic URL involved: website.com/form?id=123 The code resp ...

javascripthtmlurliframedynamic

What is the method for centering an input field with inline CSS?

Is there a way to center align an input text box on a webpage using only inline CSS? I have tried various techniques, including the following code snippet, but nothing seems to work: <input type="text" id="myInput" style= "margi ...

htmlcss

Creating distinct identifiers for table cells utilizing the map function

Is there a way to assign a unique id to each MenuItem using the map() function nested within another one? <table className={classes.table}> <thead> <tr> <td /> {sit.sit.map(sit => ( <td className={ ...

javascripthtmlreactjsmaterial-uijsx

CSS style for tables with inner gutters only

I am attempting to create a table layout with spacing between cells but without any external space for the cells at the border. I have written a simple code snippet to illustrate my issue: html, body, div, table, caption, tbody, tfoot, thead, tr, th, td ...

css

Trouble getting proper alignment displayed with JavaScript and CSS

If anyone has a solution for printing content in a div using JavaScript and CSS, please help. The main div with the id 'preview' contains content taken from a database using PHP and MySQL. However, the data on the print page appears vertically an ...

javascriptphpcss