Tips for repairing a horizontal line at the bottom of the <TD> tag and placing text on top

I am working with an HTML table that contains a single TR tag and two TD tags. Each TD has two HR tags creating horizontal lines, along with some text. I am looking for a way to keep the text aligned at the top of the TD and the horizontal line at the bottom of each column.

Below is a snippet of the code I am referring to:

<html>
<body>
    <table width="100%">
        <tr>
            <td style="text-align: left; width: 50%;">
                sdbasdbmnsadbmnasdsad
                <br />
                sdbasdbmnsadbmnasdsad
                <br />
                sdbasdbmnsadbmnasdsad
                <br />
                sdbasdbmnsadbmnasdsad
                <br />
                sdbasdbmnsadbmnasdsad
                </hr>
            </td>
            <td style="text-align: left; width: 50%;">
                sdbasdbmnsadbmnasdsad
                <br />
                sdbasdbmnsadbmnasdsad
                <br />
                sdbasdbmnsadbmnasdsad
                <br />
                <hr width="40%" />
            </td>
        </tr>
    </table>
</body>
</html>
htmlcss

Answer №1

Add a new row below the existing rows to separate them using horizontal lines

<tr>
  <td>
    Content
  </td>
  <td>
    Content
  </td>
</tr>
<tr>
  <td>
    <hr width="40%" />
  </td>
  <td>
    <hr width="40%" />
  </td>
</tr>

Adjust the height of each row to create your desired spacing between the text rows

Answer №2

Instead of using the hr elements, consider utilizing the border-bottom CSS property on the td to create bottom lines and employ vertical-align to align text at the top.

Answer №3

To enhance the appearance of each <td> element, I suggest removing the <hr> and replacing it with a bottom border style:

<td style="text-align: left; width: 50%; border-bottom: 1px solid red;"></td>

If you prefer to maintain the <hr> but want to adjust its width to match the <td>, consider using this alternative approach:

<hr style="display:inline-block; width:40%;">

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

Employ CSS flexbox and/or JavaScript for creating a customizable webpage

I am in the process of developing a basic IDE for an educational programming language that has similarities to Karel the Dog. One major issue I am encountering is creating the foundation HTML page. The IDE consists of 4 main areas: Toolbox (contains but ...

javascripthtmlcssflexboxcodemirror

Exploring the concept of nested views in AngularJS's UI Router with multiple views integration

I am facing an issue with configuring multiple views on one page, where one view is nested within another. My code in app.js does not seem to be working properly. Below are the details: This is my index.html file <body ng-app="configuratorApp" > ...

javascripthtmlangularjsangular-ui-router

Using mix-blend-mode with an SVG image within a colored <div>: tips for applying it to the background color of your HTML

I am facing an issue with a SVG file that has mix-blend-mode styles defined on certain elements. The blending is working properly for the elements inside the SVG, but not for the background color of the HTML <div>. For instance: <!doctype html> ...

htmlsvgmix-blend-mode

What is the best method to eliminate the "All Files" selection from a file input dialog

<input type="file" accept=".jpg"> By setting the accept attribute to ".jpg", the file selection dialog will only allow JPG files. However, some browsers also provide a dropdown menu option for selecting All Files: All Files (*.*). Is there a way to ...

html

Maintain the style of the main navigation menu when hovering over the sub-navigation items

I am currently in the process of redesigning the navigation bar for a specific website. The site utilizes Bootstrap, with a main navbar and a secondary navbar-subnav. While I have been able to style both navs accordingly, I am encountering difficulties whe ...

cssnav

The button contains a clickable link inside it, however the button itself is not clickable

I am encountering an issue with a button that contains a link. Whenever I hover over the button, the cursor changes as expected, but clicking on the button itself does not trigger any action. Instead, I have to click on the link inside the button to redi ...

htmlcss

Why won't divs align vertically in the center?

I'm struggling to create a navigation bar layout where the icons are centered both horizontally and vertically within their cells. http://jsfiddle.net/digorydoo/j2v5m7gr/ I can't seem to pinpoint what's causing the issue with my current la ...

htmlcsscenteringnavigationbar

Steps to deactivate a ladda button

I'm currently utilizing Ladda UI for bootstrap in my project. My goal is to disable a button using jQuery after the user clicks on it. Despite attempting to use ajax OnComplete / OnSuccess / OnBegin, I've had no luck - the button remains enable ...

javascriptjqueryhtmlajaxtwitter-bootstrap

Styling tricks for rotating carousel images using CSS animations

I'm currently working on a carousel component that functions without the use of JavaScript. While I have made significant progress towards my goal, I am facing challenges with the animation itself. The desired behavior is for the slides to animate o ...

htmlcss

jQuery problem causes page to scroll when button is clicked

Is there a way to smoothly scroll to the second section of the page when a button is clicked using jQuery? $('.home_scroll_btn a').on('click', function(){ var scrollPosition = $('#intro-home').offset().top; $( ...

javascriptjqueryhtmlscroll

Locate specific text within the content and apply an underline to it

Is there a way to locate specific text on my website and apply an underline to it? Suppose I have some text displayed and I wish to identify all instances of the word hello and underline them. Here is my attempt at the code: $( "body:contains('hell ...

jqueryhtmlcss

Multiple callbacks triggered by jQuery CSS transitions

I am experiencing an issue with my menu animation. I am curious as to why the slideDown transition is occurring twice. You can view the JSFiddle here. <ul class=top-menu"> <li>Item 1</li> <li>Item 2</li> <ul cl ...

jqueryhtmlcss

Seeking assistance with creating an iPad application utilizing JQtouch - any t

I am attempting to create an iPad app using jQuery and jQTouch for the second time. I want to split the existing jQTouch theme designed for iPhone, which uses one window, into two separate windows optimized for the iPad. My goal is to have navigation on t ...

jquerycssajaxipadjqtouch

Is it possible to extract tooltip text from a website using Python and Selenium, specifically when the text is generated by JavaScript?

Can anyone help me retrieve the tooltip text that appears when I hover over the time indicating how long ago a game was played? You can find my summoner profile here. I have noticed that the tooltip text is not visible in the HTML code and suspect it may ...

javascriptpythonhtmlselenium

Enhancing the Appearance of Google Line Charts

Incorporating Google line charts into my upcoming web project has been a goal of mine. I aim to customize them in the style displayed in this image and display dates between months. Can anyone provide guidance on how to achieve this, if it is feasible? ...

csschartslinestyling

Having trouble with the functionality of my JavaScript slider

After attempting to incorporate a slider into my website, I encountered an issue where the slider was not functioning as expected. The slider I tried to implement can be found here: https://codepen.io/amitasaurus/pen/OMbmPO The index of the site can be a ...

jqueryhtmlcss

Is it possible to generate this result using only Bootstrap 5.2.3?

I'm currently working on a simple HTML project that aims to replicate the layout shown in the image below. I want the output to look exactly like what's displayed in the provided image. The task does not require CSS, only Bootstrap is needed for ...

htmltwitter-bootstraptwitter-bootstrap-3bootstrap-5

Tips for achieving a blurred background image effect when hovering, while keeping the text unaffected

Hey there, I've recently started my journey into web development and have encountered a roadblock. I'm trying to blur the background image of a div on hover without affecting the text inside. I have an id called c1 where I used a javascript func ...

javascriptcssimagetextblur

The li::before pseudo element isn't working properly

I am having issues with my UL list where the CSS class I applied is not affecting the li::before pseudo class. Here's the HTML: <ul class="my-ul"> <li>Item 1</li> <li>Item 2</li> </ul> This is the CSS I a ...

htmlcsspseudo-element

Modify how various classes are shown when hovering over a pseudo class

This is my customized scss code .image-container { position: relative; .delete-image { display: none; position: absolute; top: 0px; right: 0px; } .make-primary { display: none; position: absolute; ...

csssass