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

Images in Chrome are shivering when animated at unconventional positions

I am attempting to create a masking animation that reveals an image from its center. The animation is working well, but I have encountered a problem in Chrome where the revealed content shakes. Here is an example on jsfiddle: http://jsfiddle.net/BaKTN/ I ...

javascriptjquerycssgoogle-chromejquery-animate

Parse and style particular text within a DIV element

A unique text inside a div: Welcome to the world of coding. This is where creativity meets logic. Lines of code come together beautifully. Creating amazing projects is our goal. Mission: I aim to develop a script that will: Turn all instances of " ...

jquerycsshtml

What is the best way to reveal CSS files downloaded via npm?

I'm currently working on a Sass/CSS library that I have hosted on npm. I am exploring ways to make it easier for clients to access it, such as using: @import 'library_name' Instead of the less appealing option: @import 'node-modules/ ...

cssnode.jsnpmsass

Selecting Child Elements in CSS

Suppose I have the below HTML structure: <div id="div1"> .... <span class="innercontents">...</span> .... </div> Is it possible to target only the child elements of a specific parent ID? For example, could I use this CSS rule? # ...

htmlcsscss-selectors

Changing color of the collapsible icon and content when hovered over

Currently, I am working on creating collapsible content for a FAQ dropdown. The button has a 'plus' icon which changes to a 'minus' icon when clicked. My goal is to change the color of the pre-clicked 'plus' icon to white when ...

htmlcssbuttoncollapsable

Issue with ng-disabled not functioning properly for href tag within list item

Is there a way to prevent clicking on the <a> tag within a list item in a UI list so that the associated <div> is not displayed when clicked (excluding the last list item)? I have attempted using ng-disabled directly on the list item attribute ...

javascripthtmlangularjsangularjs-ng-disabled

What is the best way to ensure my footer remains at the bottom of the page even when scrolled?

I'm struggling to get my footer to stay at the bottom of a page that requires scrolling. The code I have only seems to work on pages without scrolling, causing the footer to display in the middle of the page instead of at the bottom where it belongs. ...

htmlcss

Creating subpages using IDs can be accomplished by following these simple steps

Currently, I am in the process of developing a website that contains a plethora of information, specifically news articles. Each news article on my site features an introduction and a header. Upon clicking on a particular news article, the full content is ...

phpjavascriptjqueryhtml

What safety measures should be implemented when granting users permission to modify HTML and CSS on your site?

I'm really impressed by the customization options on Tumblr. Users can edit the HTML and CSS of their profiles, which is something I'd love to incorporate into my own site. However, I'm concerned about the security implications of allowing t ...

htmlcsscustomizationsecurity

When importing both shared-lib and MUI in my ReactJS application, I noticed that my custom MUI styles were being overwritten by the MUI styles

I have developed a shared library using React and Storybook. Within this library, I am utilizing the MUI V5 Button and making some style modifications using CSS modules. I executed the "build&pack" script in my library, which generated a tgz package that ...

cssreactjsmaterial-ui

One Page HTML5 with a Bootstrap fixed top menu, revealing content on menu item click

Is there a way to have the Bootsrap mobile menu automatically unfold when a link (anchor on the same page) is clicked? The menu unfolds with class navbar-collapse collapse in The menu folds with class navbar-collapse collapse out I already have an oncl ...

jquerycsshtmltwitter-bootstrap-3

Utilizing JavaScript for manipulating arrays and displaying images

After asking this question previously without a satisfactory solution, I am hoping to provide better clarification. Imagine having an array with 3 items and it lands on 0 - a code is set up to display this in a div. Now, I want the image to be shown righ ...

javascripthtmlcss

Guide on creating an HTML5 rectangle for reuse using the Prototypal Pattern

I'm struggling to grasp Prototypal Inheritance through the use of the Prototypal pattern by creating a rectangle object and an instance of that rectangle. It seems like it should be straightforward, but I'm having trouble understanding why the Re ...

javascripthtml

A compilation of approved classes for the quill toolbar

The instructions provided in the documentation for the quill module indicate that you can manually create a toolbar using HTML, and then pass the corresponding DOM element or selector to Quill. This will result in the ql-toolbar class being added to the to ...

javascripthtmlquill

Understanding Node.js document object

Hey, I'm currently trying to execute a JavaScript function on the server side using node.js, but I've encountered an issue. The function relies on accessing hidden values within the returned HTML using the document DOM, however, the document obje ...

javascripthtmlnode.js

unable to interpret information

I've encountered an issue with posting data to my webpage (page3.php). Despite using $test=$_POST['radio_second']; on the page, the test variable remains empty. Any help in resolving this would be greatly appreciated. Thank you! <p> ...

phphtml

How can I use AngularJS to filter ng-repeat values based on the input ng-model value of another field?

Can I Repeat Values Based on Another Input NG-Model Value in AngularJS? There is one input value, let's say Social Psychology, and the corresponding ng-model for this value is kpcategory. I am using ng-repeat="question in questions" to list all ...

htmlangularjsmeanjs

"Placing the save button on top of a div - a step

I am trying to position a div with an ID below a save button in my HTML code. The current setup looks like this: <button id="item_new" data-action="create" class="floating-button mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button- ...

htmlcss

I would like to style the input checkbox using CSS

Is there a way to style input checkboxes with CSS that will work on all browsers (Chrome, Firefox, IE 6, 7, and 8)? If jQuery is the only solution, please let me know. It needs to be compatible with all browsers. Can anyone provide guidance on how to ach ...

jqueryhtmlcssinputcheckbox

Internet Explorer and CSS: How to eliminate a highlight that pops up when the button is clicked

Could you please check out this website in Internet Explorer (I've tried it on the latest version as well as older versions.) On the above link, there are two circular buttons at the bottom of the page. In IE, when you click on a button, a semi-trans ...

htmlcssinternet-explorerhighlight