Is there a way to eliminate the horizontal line in my Table design?

Is there a way to eliminate the horizontal line from the table?

css, html

<table border="1" style="width:100%; border-collapse: collapse">

            <tr>
                <th>Prepared By:</th>
                <th>Released By:</th>
                <th>Trucker's Acknowledgement</th>
            </tr>
            <tr>
                <td><font size="1">/*auto populated*/</font></td>
                <td><font size="1">/*auto populated*/</font></td>
                <td><font size="1">Driver : ______________                Helper: ______________ </font></td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td><font size="1">Signature/Date</font></td>
                <td><font size="1">Contact Nos. : ______________</font></td>
            </tr>
        </table>

I am looking to only hide the horizontal line in the tablehttps://i.stack.imgur.com/XB0pz.png

htmlcss

Answer №1

It is advisable not to apply Global th or td CSS as it will affect all tables th/td. Instead, create a custom class like table-no-bottom-border for the table and apply CSS specifically for removing the bottom border only for that table. The necessary updates are provided in the below code snippet. I trust this solution will be beneficial for you. Thank you

.table-no-bottom-border {
  border: 1px solid #000;
  border-radius: 5px;
  overflow: hidden;
  width:100%; 
}

.table-no-bottom-border th,
.table-no-bottom-border td {
  border-top: 0;
  border-bottom: 0;
  border-right: 1px solid #000;
}

.table-no-bottom-border th:last-child,
.table-no-bottom-border td:last-child {
  border-right: 0;
}
<table class="table-no-bottom-border" cellspacing="0">
  <tr>
      <th>Prepared By:</th>
      <th>Released By:</th>
      <th>Trucker's Acknowledgement</th>
  </tr>
  <tr>
      <td><font size="1">/*auto populated*/</font></td>
      <td><font size="1">/*auto populated*/</font></td>
      <td><font size="1">Driver : ______________                Helper: ______________ </font></td>
  </tr>
  <tr>
      <td>&nbsp;</td>
      <td><font size="1">Signature/Date</font></td>
      <td><font size="1">Signature/Date</font></td>
  </tr>
  <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td><font size="1">Contact Nos. : ______________</font></td>
  </tr>
</table>

Answer №2

Essentially, the horizontal lines represent the border-bottom css property. By setting it to 0, you can eliminate the horizontal lines.

Update:

Assign a specific class to the table so that only tables with this class will be affected.

Here is a suggested solution:

.table-modify tr {
  border-bottom: 0;
}
<table class="table-modify" border="1" style="width:100%; border-collapse: collapse">

  <tr>
    <th>Prepared By:</th>
    <th>Released By:</th>
    <th>Trucker's Acknowledgement</th>
  </tr>
  <tr>
    <td>
      <font size="1">/*auto populated*/</font>
    </td>
    <td>
      <font size="1">/*auto populated*/</font>
    </td>
    <td>
      <font size="1">Driver : ______________ Helper: ______________ </font>
    </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>
      <font size="1">Signature/Date</font>
    </td>
    <td>
      <font size="1">Signature/Date</font>
    </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>
      <font size="1">Contact Nos. : ______________</font>
    </td>
  </tr>
</table>

Answer №3

To remove the horizontal border from all table td elements, simply apply the CSS properties `border-top: none;` and `border-bottom: none;`. If you also want to remove the horizontal line from table th (table header), just add `border-bottom: none;` to the th element.

th {
  border-bottom: none;
}

Alternatively, if you only want to style the table td elements, use the following CSS:

 td {
      border-top: none;
      border-bottom: none;
   }
<table border="1" style="width:100%; border-collapse: collapse">
            <tr>
                <th>Prepared By:</th>
                <th>Released By:</th>
                <th>Trucker's Acknowledgement</th>
            </tr>
            <tr>
                <td><font size="1">/*auto populated*/</font></td>
                <td><font size="1">/*auto populated*/</font></td>
                <td><font size="1">Driver : ______________                Helper: ______________ </font></td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td><font size="1">Signature/Date</font></td>
                <td><font size="1">Signature/Date</font></td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td><font size="1">Contact Nos. : ______________</font></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

What causes the scrollTop to appear erratic?

There is a simple issue that I find difficult to explain in text, so I have created a video demonstration instead. Please watch the video at this link: The functionality on my page works perfectly when scrolling down, as it replaces images with the next i ...

javascriptjqueryhtmlcssscrolltop

Using a JavaScript if statement to check the height of a specific HTML element

I have been struggling to figure out how to insert an if-else statement in JavaScript that references data about an HTML element. My objective is to create an "onclick" function that enlarges an image with a 200ms delay and another function that returns th ...

javascriptjqueryhtml

The initial item on the list, displayed on the right side in Google Chrome

Currently experiencing an issue with Google Chrome where the first list item's bullet is floating right while all other list items' bullets are aligned correctly at left. Here is the code snippet causing the problem: <div class="window_sub_ ...

htmlcssgoogle-chromecross-browser

Modifying SASS variable values based on the presence of specific text in the page URL

How can I utilize the same SASS file for two different websites with similar functionality but different color schemes? My goal is to dynamically change the color based on the URL of the page. However, I am facing challenges in extracting the page URL from ...

javascriptjqueryhtmlcsssass

Having trouble making z-index work on a child div with absolute positioning

I am attempting to design a ribbon with a triangle div positioned below its parent div named Cart. <div class="rectangle"> <ul class="dropdown-menu font_Size_12" role="menu" aria-labelledby="menu1" style="min-width: 100px; z-index: 0"> & ...

jqueryhtmlcsstwitter-bootstrap-3css-shapes

Top way to include an HTML and javascript file in an Ext.Panel within Sencha Touch

My main goal is to efficiently include external HTML files and display them on an Ext.Panel in Sencha touch 2.3 by creating a wrapper module for the HTML file that can be instantiated using xtype, with an external Javascript file for event handling. Updat ...

javascripthtmlextjssencha-touchsencha-touch-2

What is the best way to showcase data from input fields within a bootstrap modal dialog?

After the user has entered their details and clicks submit, I would like to present the information in a Bootstrap modal with a confirmation button below. This serves as a preview of the data before it is saved to the database. Here's what I have so ...

javascriptjqueryhtmltwitter-bootstrap

I want to create a custom jQuery slider totally from scratch

Greetings everyone, I have been tasked with creating a slider using only HTML / jQuery code. Here is the template: And here is the HTML code for the template above: <div id="viewport-container"> <section id="sliding-container"> & ...

javascriptjqueryhtmlcssslider

How can I bypass hotlink protection for RSS images?

According to the definition, RSS feeds are considered public. When images are displayed within the feed, it is essentially "hotlinking," meaning that the content is being read directly from the Internet rather than your local machine. Is there a specific ...

htmlimagersshotlinking

Navigating through the img src using JavaScript

Currently, I am working on a task that involves the following code snippet: <input type="file" id="uploadImage" name="image" /> <input type="submit" id="ImageName" name="submit" value="Submit"> My goal is to have the path of the selected imag ...

javascriptjqueryhtml

Analyzing HTML markup to locate an anchor tag

While attempting to parse an HTML code using BeautifulSoup in order to retrieve a link that is hidden and does not appear on the website, I have encountered difficulties as it only retrieves links visible on the page. Is there a method to effectively par ...

pythonhtmlbeautifulsoup

The loop is being controlled but the data is not being added and shown in the HTML div

I am struggling to display JSON data in an HTML div using a for loop. While my control is entering the loop, the data is not being appended and displayed in the HTML div. Here is the JSON data: [{"id":"15","FirstName":"ranjan","MiddleName":"","LastName": ...

javascriptphpjqueryhtmljson

Is there a way to increase the total of each row by two when a button is clicked?

Looking to enhance the sum of each row by two depending on whether a button is clicked. HTML: <table> <tr> <td> <input type="checkbox" class="prof" name="prof" value="0"> <input class=&quo ...

javascripthtmljquerybuttonsum

Applying binary information to an image

Let's say I have an <img/>. The img is initially set with src='http://somelocation/getmypic'. Later on, there might be a need to change the content of the image based on some ajax call that returns binary data. However, this decision c ...

javascripthtmlajaxasp.net-mvcimage

Prevent scrolling in a full-screen modal using CSS

I came across a beautiful fullscreen modal that is purely based on CSS. The only issue I encountered was that the modal isn't scrollable. I attempted various solutions but haven't been successful. Here's the script I am using: ...

htmlcssmodal-dialog

Images are failing to show up in the iPhone design

Encountering issues with displaying images on an iPhone? You can replicate the problem by minimizing your browser window horizontally. Here is a link showcasing the problem: here. To temporarily fix this, try zooming out the browser (Ctrl+-). You can see a ...

javascriptphpjqueryhtmlcss

Ways to prevent a <a href> element with a class linked to javascript from behaving like a block element

I am currently facing an issue with formatting an inline navigation. The last link, which is associated with a JavaScript class, is causing the entire link to become a block element instead of aligning inline with the rest of the links in the navigation. ...

javascripthtmlcss

Is it possible for Java Applets to interact with external sources with user consent?

My goal is to develop a platform where users can input external websites, and my application will modify the returned source before providing it back to the user. The challenge lies in the fact that HTML5 and flash sockets have limitations when it comes to ...

javahtmlappletexternalsame-origin-policy

Uniqid in React fails to generate unique IDs

Currently working on creating my first react project and developing a todo list. I have incorporated the uniqid generator into my todo object, but it seems to be returning an empty id rather than a random one. Oddly enough, if I move the todo state outsi ...

javascripthtmlcssreactjs

Quick trick to strip decimal points from prices with jquery

Is there a way to remove the decimal point from the price on my website? This is what my HTML looks like: <span id="product-price-4432" data-price-amount="399" data-price-type="finalPrice" class="price-wrapper " itemprop="price"> <span class="p ...

jqueryhtmlrounding