Adjust the height of a table cell in an HTML document

Adjusting the height of a cell within a table.

<table>
  <tr>
    <th style="border: 1px solid black; border-color: #96D4D4; height:5px">Amount1</th>
    <td style="border: 1px solid black; border-color: #96D4D4;">50</td>
  </tr>
  <tr>
    <th style="border: 1px solid black; border-color: #96D4D4; height:5px">Amount2</th>
    <td style="border: 1px solid black; border-color: #96D4D4;">50</td>
  </tr>
  <tr>
    <th style="border: 1px solid black; border-color: #96D4D4; height:5px">Total</th>
    <td style="border: 1px solid black; border-color: #96D4D4;">100</td>
  </tr>
</table>

The outcome is displayed below for reference,

https://i.sstatic.net/2VK8i.png

I am looking to decrease the size of the cell border to less than 10px. Although a height of 5px is specified, it is not resulting in reduced size. Any suggestions on how to achieve this would be highly valued.

htmlcss

Answer №1

To decrease the height of the final row, you can adjust the line-height by adding 

style="line-height: 5px;"
at that specific level, as shown below:

<table>
    <tr>
      <th style="border: 1px solid black; border-color: #96D4D4; height:5px">Amount1</th>
      <td style="border: 1px solid black; border-color: #96D4D4;">50</td>
    </tr>
    <tr>
      <th style="border: 1px solid black; border-color: #96D4D4; height:5px">Amount2</th>
      <td style="border: 1px solid black; border-color: #96D4D4;">50</td>
    </tr>
    <tr style="line-height: 5px;">
      <th style="border: 1px solid black; border-color: #96D4D4; height:5px">Total</th>
      <td style="border: 1px solid black; border-color: #96D4D4;">100</td>
    </tr>
  </table>

If you wish to reduce the height of all rows, you can apply the same style at the table level.

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

Include an expand and collapse icon in a hyperlink

I have successfully implemented a functionality whereby clicking a link collapses other hidden names. However, I am now facing a challenge in trying to change an image once the link is clicked. Here is the code snippet that I currently have: $(docu ...

javascriptjquerycss

A method for automatically refreshing a webpage once it switches between specific resolutions

On my page www.redpeppermedia.in/tc24_beta/, it functions well at a resolution of over 980px. However, when the resolution is brought down to 768px, the CSS and media queries alter the layout. But upon refreshing the page at 768px, everything corrects itse ...

javascriptjqueryhtmlcssparallax

Creating a Navigation Bar in Outlook Style Using Javascript and CSS

Looking for a navigation sidebar design similar to Outlook for my web application. I have seen options available as Winform controls and through Visual WebGUI, but these are Microsoft-dependent solutions. We need a Javascript & CSS based solution that is s ...

javascriptjqueryhtmlcss

Creating a disabled HTML button that reacts to the :active CSS pseudo class

CSS: button:active { /* active css */ } button:disabled { opacity: 0.5; } HTML: <button disabled="disabled">Ok</button> After clicking the button, the browser applies the button:active state to give the appearance of a click, despite the ...

htmlcsscss-selectorspseudo-class

Error encountered due to an undefined index in the $_POST variable being sent via ajax

I've looked at other questions, but haven't found the solution I need. My task is to prompt the user for a message, send it to the server, store it in a database, and display it below the input field without reloading the page. To achieve this, ...

javascriptphphtmlajax

The fixed position element appears to be failing to stay fixed in Google Chrome

Something strange is happening with a fixed position element in Chrome. It is still scrolling with the page even though it should be fixed. To better understand the issue, you can view it on the live site In Firefox and even IE, the "Block 1 Block 2 Block ...

javascripthtmlcss

Adjusting the size of all elements on a webpage

Upon completing my project, I noticed that my localhost:3000 is zoomed in at 125%, causing it to appear less than ideal at 100% zoom. Is there a way to adjust the zoom/scale of my website to match how it appeared on my localhost environment? I came across ...

javascriptcssreactjszooming

Tips for incorporating the numerous values of a one-to-many relationship into an HTML template using Django

I am facing an issue with a one-to-many relationship in my Django project. Here is how it is structured: class Listing(models.Model): title = models.CharField(max_length=60) class Images(models.Model): listing = models.ForeignKey(Listing, on_delet ...

pythonhtmldjangosyntax-errorone-to-many

After the form is successfully submitted, you can remove the required attribute

Upon clicking the submit button of a form, an input box is highlighted with a red border if empty. After successful jQuery AJAX form submission, a message "data submitted" is displayed and the form is reset causing all input fields to be highlighted in red ...

javascriptjqueryhtmlajaxforms

The button background doesn't line up with the shadow on the vertical menu

I am currently working on a project that aims to investigate how older individuals interact with flat design compared to skeuomorphic design. As part of this study, I intend to create a 3D and realistic menu. While searching for a suitable pre-made button, ...

cssbuttonmenu

Unexpected form submission behavior

<?php require_once("./include/membersite_config.php"); if(!$fgmembersite->CheckLogin()) { $fgmembersite->RedirectToURL("index.php"); exit; } include 'header.php'; include './include/sql/connect.php'; if(isset($_POST['su ...

phphtmlmysqlformssubmit

the text input remains fixed in size and does not resize

Visit the page and scroll down to find a section located next to the "Directions" button that contains an input field. This input field allows you to enter an address and utilize Google Maps for navigation. One puzzling aspect is that regardless of what ...

htmlcssinput

Ways to activate the date input field and reformat it for smooth insertion or selection in mysqli

I would like to enable the input of dates in UK format - DD/MM/YYYY on an HTML form. Before any PHP code is executed, such as queries (e.g. select, insert, etc.), I want PHP to convert the entered date from DD/MM/YYYY to YYYY-MM-DD. HTML <div class="f ...

phphtmlmysqli

The tag <li> is not allowing enough room for the content to expand as needed

I am trying to create a list using ul li elements. When the content inside the li exceeds the width, a scrollbar appears. However, I am encountering an issue where the li tag does not cover the entire width and spills outside. .container{ b ...

htmlcss

The <nav> and <section> elements are not appearing on the page

Website: CSS: Hello there! I am experiencing an issue where the nav and section elements are not displaying on my website. They seem to only show the height and background-color attributes. Interestingly, they appear correctly on my old Firefox version ( ...

csshtmlnav

"SASS: Troubleshooting the Issue with nth-child Selector Not Functioning Proper

I am currently attempting to apply specific styles to all items in a list except for the first child. While I believe I have correctly set up the SASS, the style is not being applied as expected. HTML <div class="list"> <div *ngFor="let item o ...

cssangularsass

The dropdown menu is not appearing in the correct position when clicked

https://i.stack.imgur.com/fMyZQ.jpg Hello there, this link appears normal before clicking on it. But once clicked, it moves to the top of the page like so: https://i.stack.imgur.com/yZ0R0.jpg You can clearly see the difference. I have also provided the c ...

javascripthtmlcss

Is the vertical 3D carousel malfunctioning?

While working on a vertical carousel and rotating it 180deg on the X-axis, I noticed that the backside of the carousel appears to have an incorrect orientation in 3D space. I'm looking for a solution that not only includes the code but also explains w ...

htmlcsscss-transitions

What is the best way to distinguish Xpath when dealing with several elements that share identical attributes and text?

I need to find and click on the link labeled "Customer One". The current xPath I am using is: //div[contains(@class,'client-info') and contains(div/text(),'Customer')] When using Firepath, this xPath returns four separate elements (I ...

htmlxmlseleniumxpathwebdriver

Set an HTML line break after every comma in the array

Here is my array: var a = ['bla bla bla', 'bla bla', 'bla'] I want each value to be displayed on a new line after every comma (<br />), but I am unsure how to achieve this. I attempted the following approach: var a = [& ...

javascripthtmlreactjs