Minimizing the Height of HTML Table Rows

I have a table with a few rows. I'm trying to set the height of the 1st and 3rd rows to 1px and keep the 2nd row at normal height. However, my code isn't working as expected.

Here is the HTML CODE:

<table border="0">
   <tr style="height:1px;" >
    <td width="10"><hr></td>

  </tr>
<tr style="height:20px;" >
    <td width="10">Hello</td>

  </tr>
  <tr style="height:1px;" >
    <td width="10"><hr></td>

  </tr>
</table>

Could someone please help me figure out how to achieve this?

Note: I do not want to use borders because for certain rows, I may or may not need a horizontal line inside the row.

htmlcss

Answer №1

Make sure to include style="padding:0px; margin:0px;" in your hr tag and adjust the height of the third tr element to 2px

After making these changes, your code will look like this:

<table border="0">
   <tr style="height:2px;" >
    <td width="10px"><hr style="padding:0px; margin:0px;"></td>
  </tr>
<tr style="height=20px;" >
    <td width="10px">Hello</td>
  </tr>
  <tr style="height=2px;" >
    <td width="10px"><hr style="padding:0px; margin:0px;"></td>
  </tr>
</table>

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

Chrome field history is causing text input fields to malfunction

When using a regular text input field, I typically expect to see a history of my past entries by double clicking on it in Chrome. However, we have some fields rendered with Angular JS on a page that do not display any history items when double clicked. I ...

javascripthtmlangularjsgoogle-chrome

Disregard any labels when it comes to clickable areas for mouse events

Here is a simple example in JSFiddle where a text is displayed over an image inside a div element. Depending on where the cursor hovers, it can exhibit three different behaviors: pointing hand over the image, allowing text selection over the content of the ...

javascriptjqueryhtmlcss

Focus on selecting each label within a table using JavaScript

In my current setup, I am attempting to customize radio buttons and checkboxes. Array.from(document.querySelectorAll("tr")).forEach((tr,index)=>{ var mark=document.createElement("span"); Array.from(tr.querySelectorAll("input")).forEach((inp,index ...

javascripthtmlcssdom-traversal

Error: Unable to retrieve the value of a null property | ReactJS |

There are two textboxes and one button designed as material UI components. </p> <TextField id="chatidField" /> <br /> <p> <code>Enter Your Name:</code> <hr /> & ...

javascripthtmlcssreactjsmaterial-ui

Shift the column upwards for devices with smaller screens

I need help with a layout issue I am facing. Currently, my layout looks like this: [blurb] (8) [form] (4) However, I want the [blurb] to take up col-md-8 and the [form] to take up col-md-4 so that they are full width on smaller devices. On smaller devic ...

csstwitter-bootstrap

The table width is malfunctioning on Firefox when viewed in HTML

I have been puzzled by the fact that I am unable to adjust the width of the table th in Firefox browser to the smallest value. However, in Chrome browser, this functionality works perfectly. I simply want to divide the values of my td into three rows as sh ...

javascripthtmlcssfirefoxprinting

Displaying content in a hidden div on click event

I am part of a volunteer group for prostate cancer awareness and support, and our website features multiple YouTube videos that are embedded. However, the page has been experiencing slow loading times due to the number of videos, despite them being hidden ...

javascriptjqueryhtmliframeonclick

Accessing a JSON array in PHP to retrieve a specific value

I am working with a JSON array that I received from an API. Specifically, I am trying to extract the "value" and "value_high" fields from the JSON related to the Mann Co Supply Crate Key. While I was able to create a script that retrieves the values store ...

phphtmljson

Compact selection box, vast information

My dilemma is having restricted space for a dropdown containing a considerable amount of text. Is it feasible to keep the dropdown width small while expanding the list popup size? Update: My browser of choice is Internet Explorer. ...

htmlcss

Switch between different classes with JavaScript

Here is the code that I am working with: This is the HTML code: <div class="normal"> <p>This is Paragraph 1</p> <p>This is Paragraph 2</p> <p>This is Paragraph 3</p> <p>This is Paragraph 4&l ...

javascripthtmlcss

Issue with Material Design Lite input floating label not functioning properly post page navigation

I am currently developing a mobile hybrid application using Material Design Lite, but I have run into a small issue. When I add input field elements to my pages, the floating text and placeholder do not function properly. In my application, I am utilizing ...

angularjshtmlcssmaterial-design-lite

Mastering the art of customizing jQuery Mobile skins

Just landed a front end developer role at a prominent bank where I'll be focusing on the UI using jQuery Mobile. I'm looking for a comprehensive page that contains all the assets of jQuery Mobile to streamline the skinning process. Any leads? ...

jqueryhtmlcssmobile

PHP function that includes an if statement in its returned value

Having a function that determines a user's role is functioning correctly within the HTML document. However, when multiple functions are involved in connecting to a database and displaying information, I encounter issues with granting access to certain ...

phphtmlfunctionif-statementreturn

Conceal HTML components on certain devices

I am interested in customizing the display of HTML elements on different devices to enhance the overall design for specific viewing experiences. For example, I want to optimize the layout when accessing the page on an iPad as opposed to a PC. In order to ...

htmlipadmobilehide

Angular's observable data fail to show on the screen

I am facing an issue with passing the data of an Observable fetched via an API request to a component variable for display. I have been trying but unable to make it work successfully. Any assistance would be greatly appreciated. Here is my code. Thank you. ...

htmlangulartypescriptapibootstrap-5

Setting Up One Stylesheet Based on Local Preferences

I am working on positioning translated text on a webpage. The word NEW in English and NOUVEAU in French need to be centered below a graphic. Since the words have different lengths, I am considering using absolute positioning. The challenge is setting the l ...

htmlruby-on-railscsslocalization

What is causing my HTML to not recognize my Angular JS code?

Trying to dive into Angular JS, I wrote a small piece of code but for some reason, the HTML is not recognizing Angular JS. This is my index.html file: <!DOCTYPE HTML> <html ng-app="store"> <head> <link rel="stylesheet" type=" ...

javascripthtmlangularjs

A small space underneath the <a> element nested within a <li> tag within a navigation bar

As a new programmer, I am currently working on creating a navbar. However, I have encountered an issue where there are small gaps underneath the user when my cursor hovers over it. There is a white gap under the user element. I expect that the hover back ...

htmlcss

Utilize Vuetify to showcase a vertical layout consisting of a header and a v-card, occupying the full height

<template> <div> <div style="height: 20px; color: yellow"> test </div> <v-card class="markdown-preview" tile> <v-card-text v-html="previewText"> </v-card-text> ...

javascripthtmlcssvue.jsvuetify.js

What is the best way to determine the position of the currently chosen selection in relation to the top

Let's say we have a situation like this: <select id="my-select"> <option id="iun">Option 1</option> <option id="sdd">Option 2</option> <option id="ert" select="selected">Option 3</option> <option i ...

jqueryhtmlhtml-select