What is the best way to insert a horizontal line following the second row?

My code can be found here: Codepen. I am trying to insert a horizontal line after the second row. How can I achieve this, similar to the image below:

https://i.sstatic.net/tJL8n.png

<table class="tg1">
    <tr>
        <th class="tg-031e1" colspan="4">Email</th>
        <th class="tg-yw4l1" colspan="4">Order Details</th>
    </tr>
    <tr>
        <td class="tg-yw4l1" colspan="4">
            <p style="font-family: Arial, Helvetica, sans-serif; color: #555555; font-size: 14px; padding: 5px ;"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c9b1b0b389aea4a8a0a5e7aaa6a4">[email protected]</a><br>
            Telephone: 657676767676<br>
            IP Address: 102.364.134.93<br>
            Order Status: Pending</p>
        </td>
        <td class="tg-yw41l" colspan="4">
            <p style="font-family: Arial, Helvetica, sans-serif; color: #555555; font-size: 14px; padding: 5px ;"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ee969696ae89838f8782c08d8183">[email protected]</a><br>
            Telephone: 657676767676<br>
            IP Address:000.000.00.01<br>
            Order Status: Pending</p>
        </td>
    </tr>
</table>
htmlcss

Answer №1

Check out this code snippet:

table {
    border-collapse: collapse;
}
tbody > tr:first-child {
    border-bottom: 4px solid #ccc;
}
<table class="tg1">
      <tr>
        <th class="tg-031e1" colspan="4">Email</th>
        <th class="tg-yw4l1" colspan="4">Order Details</th>
      </tr>
      <tr>
        <td class="tg-yw4l1" colspan="4">
            <p style="font-family: Arial, Helvetica, sans-serif; color: #555555; font-size: 14px; padding: 5px ;"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="82fafbf8c2e5efe3ebeeace1edef">[email protected]</a><br>
                                Telephone: 657676767676<br>
                                IP Address: 102.364.134.93<br>
                                Order Status: Pending</p>
        </td>
        <td class="tg-yw41l" colspan="4">
            <p style="font-family: Arial, Helvetica, sans-serif; color: #555555; font-size: 14px; padding: 5px ;"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2e5656566e49434f4742004d4143">[email protected]</a><br>
                                Telephone: 657676767676<br>
                                IP Address:000.000.00.01<br>
                                Order Status: Pending</p>
        </td>
      </tr>
    </table>

Answer №2

Make a simple addition to your table by inserting a new row with colspan="8" and then including something like a horizontal ruler

<table class="tg1">
      <tr>
        <th class="tg-031e1" colspan="4">Email</th>
        <th class="tg-yw4l1" colspan="4">Order Details</th>
      </tr>
      <tr>
        <td colspan="8"><hr></td>
      </tr>
      <tr>
        <td class="tg-yw4l1" colspan="4">
            <p style="font-family: Arial, Helvetica, sans-serif; color: #555555; font-size: 14px; padding: 5px ;"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c4bcbdbe84a3a9a5ada8eaa7aba9">[email protected]</a><br>
                                Telephone: 657676767676<br>
                                IP Address: 102.364.134.93<br>
                                Order Status: Pending</p>
        </td>
        <td class="tg-yw41l" colspan="4">
            <p style="font-family: Arial, Helvetica, sans-serif; color: #555555; font-size: 14px; padding: 5px ;"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="80f8f8f8c0e7ede1e9ecaee3efed">[email protected]</a><br>
                                Telephone: 657676767676<br>
                                IP Address:000.000.00.01<br>
                                Order Status: Pending</p>
        </td>
      </tr>
    </table>

Answer №3

Implementing best practices is essential for maintaining a clean and organized code structure. For instance, ensure that the th elements are placed within the thead section and content within tbody. To maintain consistency in styling across similar elements, it is advisable to use CSS for applying styles uniformly. Refer to the code snippet below:

HTML

   <table class="tg1">
        <thead>
            <tr>
                <th class="tg-031e1" colspan="4">Email</th>
                <th class="tg-yw4l1" colspan="4">Order Details</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="tg-yw4l1" colspan="4">
                    <p>
                        <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e9919093a98e84888085c78a8684">[email protected]</a><br>
                        Telephone: 657676767676<br>
                        IP Address: 102.364.134.93<br>
                        Order Status: Pending
                    </p>
                </td>
                <td class="tg-yw41l" colspan="4">
                    <p>
                        <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f58d8d8db59298949c99db969a98">[email protected]</a><br>
                        Telephone: 657676767676<br>
                        IP Address:000.000.00.01<br>
                        Order Status: Pending
                    </p>
                </td>
            </tr>
        </tbody>
    </table>

CSS

.tg1 {
    border-collapse: collapse;
}

    .tg1 thead {
        border-bottom: 1px solid gray;
    }

    .tg1 tbody p {
        font-family: Arial, Helvetica, sans-serif;
        color: #555555;
        font-size: 14px;
        padding: 5px;
    }

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

Tips for showing form data upon click without refreshing the webpage

Whenever I input data into the form and click on the calculate button, the result does not appear in the salary slip box at the bottom of the form. However, if I refresh the page and then click on the calculate button, the results are displayed correctly ...

javascripthtmlcssbootstrap-5

Accessing the selected value from a dropdown list filled with data from a PHP array in HTML

My HTML and PHP code consists of a select dropdown that looks like this: <select name="category" id="_category" class="_cateogry" onchange="submitTheForm() > option value="">Please select</option> <?php foreach ($categories as $cont ...

javascriptphphtmleventsdom

Troubleshooting WordPress 4.4 Image Issues: Understanding the Conflict between Srcset and Bxslider

We have several company websites that use Wordpress along with a Genesis installation, a custom Genesis child theme, and bxslider for image sliders. When we view the slider on Firefox, we notice a responsiveness issue that we believe is caused by the new ...

jquerycsswordpressbxslidergenesis

What could be causing the submission failure of the form post validation?

My Code: <form method="post" name="contact" id="frmContact" action="smail.php"> ... <label for="security" class="smallPercPadTop">Please enter the result:</label> <br /><h3 id="fNum" class="spnSecurity"></h3>& ...

javascriptjqueryhtmlforms

What is the method for identifying which individual element is responsible for activating an event listener?

While working on a color picker project in JavaScript for practice, I encountered an issue. I needed the #screen element to display the selected color when clicked. How can I determine which color has been clicked and pass its value to the function so that ...

javascripthtmlcss

(Applied jQuery) Trouble with div height in responsive layout

I have created jQuery full-page sliding panels that work perfectly on desktop devices. However, when the browser window is resized smaller, the panel divs fail to fill the page. If you want to view the issue in action, you can check out the JSFiddle demo ...

javascriptjquerycsshtml

Can you explain the distinction between ng-init and ng-bind?

Here is a code snippet utilizing ng-init: <!DOCTYPE html> <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body> <div ng-app="" ng-init="names=['Jani','Heg ...

htmlangularjs

Retrieve the Twitter user's profile picture

I am looking for a fast method to retrieve a Twitter profile image using either PHP or Javascript. My goal is to obtain the full image URL, not just the avatar size. Any code example would be greatly appreciated. Thank you! ...

phpjavascripthtmlapitwitter

Troubleshooting WordPress <?php body_class(); ?> Problem

After successfully integrating my theme into WordPress, I decided to add WooCommerce to create a shop. However, I encountered an issue where the styles of WooCommerce were not appearing properly. Upon researching, I discovered that the root cause was the a ...

phphtmlcsswordpress

Could you tell me how to determine the height of a page when converting it to a PDF?

I am facing a challenge trying to render a dynamic content PDF using puppeteer and react. The layouting is handled in Material UI for react, so using page-break-before:always is not feasible as it conflicts with the flex grid layout. My goal is to determin ...

javascripthtmlreactjspdfmaterial-ui

Reset the button is behaving in the same way as the submit button

I'm having an issue with the script below where the reset button is acting like a submit button as well. Can anyone help me troubleshoot this problem? Thank you. HTML <input type="image" name="submit" value=" " src="image.png"> <input t ...

htmlbuttonsubmitreset

Inserting an Excel spreadsheet into a webpage as a table

Looking for a quick and easy way to include an Excel spreadsheet on a website? Let's say you need to display a table with 100 data points in an HTML or PHP file. ...

phphtmlexcel

There appears to be an issue with reading the property 'toLowerCase' of an undefined element, and I'm having trouble identifying the error

The variables I have initialized (globally): var audio; var LANGUAGE; var audioArray; var MEDIAARRAY; var WORDS; var SOUNDARRAY; This specific line is causing the error: var audioId = MEDIAARRAY.audio.lowercase.indexOf(exObject['exerciseGetWordInpu ...

javascriptjqueryhtmlajax

The alignment of elements varies between Internet Explorer and Firefox on websites

Whenever my site loads on Firefox, the phrase "Locate A Math Instructor" appears directly above "Private Math Teacher": This is the layout I desire. However, when viewing the same page in Internet Explorer, "Find a Maths Tutor" shifts up and to the left ...

htmlinternet-explorerlayout

What is the best way to remove column and row gaps in a Bootstrap grid system?

Despite adjusting padding with the image, div section, and grid gap to 0px in the grid layout, the image still fails to cover the entire cell. I am seeking a solution to eliminate these unwanted paddings that are highlighted in blue. The Bootstrap 5 .g-0 ...

htmlcssbootstrap-5

Is the CSS selector '.my-class *:not(input[type="text"])' accurate?

Is there a way to target all elements inside the DOM element with class "my-class" except for input elements of type text? I tried using the following CSS selector: .my-class *:not(input[type="text"]) { // Some CSS properties here } However, this do ...

htmlcsscss-selectors

The issue with responsive design not functioning properly on the iPhone

This is my first attempt at creating a responsive design, but it's not turning out as smooth as I expected! I have set up breakpoints at 768 and 480, and the design breaks correctly when I resize the browser. However, when I tested it on my smartphon ...

jquerycssresponsive-design

A guide on integrating functions into dynamically created buttons using the DOM

Is there a way to add functionality to the button labeled "CLICK ME TO EDIT"? I'm looking for some ideas on how to do this. var comment = prompt("Type content for new paragraph here", ""); var newParagraph = document.createElement('p'); new ...

javascripthtml

Images with fixed positions will be displayed in one div and hidden in all others

I am struggling with integrating multiple images into my webpage in a fixed position. These images should only be visible within their designated divs and scroll along with the content, hiding behind other divs. Unfortunately, I can't seem to locate ...

htmlcss

Height Difference Caused by Textarea Overflow with Auto Scrollbars

Displayed below is code that generates a textarea with 3 visible rows: <textarea id="txtInput" rows="3" cols="20" style="overflow:auto"></textarea> Unexpectedly, in Firefox (version 20.0.1), the textarea displays 4 rows instead of 3. To view ...

htmlcssfirefoxtextarea