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

Safari Mobile not rendering absolute positioning correctly

Our website www.anahatainternational.org has a functioning search section that is displaying correctly on Firefox, Chrome, and Safari browsers. However, we have encountered an issue with the mobile version of Safari where the search section appears in the ...

cssmobile-safari

scrolling smoothly to a specific div on another webpage

Incorporating a smooth scrolling feature on my website's menu bar has been quite challenging. Specifically, I want the page to redirect to another HTML page and smoothly scroll to a specific div when a sub-item is clicked. To achieve smooth scrolling ...

jqueryhtmlsmooth-scrolling

Clicking on links will open them in a separate tab, ensuring that only the new tab

Is there a way to open a new tab or popup window, and have it update the existing tab or window whenever the original source link is clicked again? The current behavior of continuously opening new tabs isn't what I was hoping for. ...

javascripthtmlusability

Disappearing Cloned Form Fields in jQuery

Hey there! I'm trying to duplicate a section of a form using the code below. But for some reason, the copied fields are only visible for a split-second before they disappear. Can anyone spot any errors that might be causing this strange behavior? jQu ...

javascriptjqueryhtml

What is the best way to input an HTML element into AngularJS code?

I am looking to integrate the html element into my angularjs code. Within my HTML, I have elements such as data-form-selector='#linechart_general_form' and data-url="{% url 'horizon:admin:metering:samples'%}" that I need to access withi ...

javascriptjqueryhtmlangularjs

Upgrading a bootstrap 3 class to bootstrap 4

Can someone help me update the classes col-sm-push-9 and col-sm-pull-3 from bootstrap-3 to bootstrap-4 in the HTML code below? <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width"> <titl ...

htmlbootstrap-4

PHP's Encoding Woes Are Back in Action

I'm encountering encoding challenges on my website, and it's becoming quite frustrating. Allow me to elaborate My meta tag specifies utf8 as the charset. The scripts I'm using also have utf8 defined (<script type="text/javascript src=". ...

phphtmlajaxpostgresqlutf-8

The media query for mobile is not functioning properly

Hello, I have a page with MVC that includes CSS for iPad and mobile devices. The media query for iPad (@media only screen and (min-device-width: 768px) and (max-device-width: 1024px)) works perfectly, but I am struggling to get the media query for mobile ...

cssmobilemedia-queries

Is there a way for me to determine when the modal animation has completed?

I'm currently using the modal feature in twitter-bootstrap and I am curious about how long it takes for the modal to appear before triggering an alert. To better illustrate my point, you can check out this example: HTML <button id="mod" class="b ...

javascriptjquerycsstwitter-bootstrapmodal-dialog

Iframe Interactivity

My goal is to create an interactive iframe that will match the current parent URL (). For example, if I have an iframe pointing to http://www.google.com and click a link within the iframe, it should update the parent URL to , and then load the clicked con ...

javascriptjqueryhtmliframe

Ways to include additional hyperlinks in my navigation bar

I am seeking ways to enhance my CSS menu so that there is no lag when new links are added. I aim to include 8 additional links if possible. Is there a way to prevent this delay and ensure that the links align correctly? nav { display: inline-block; ...

htmlcss

Customize Link Appearance Depending on Current Section

Looking for a way to dynamically change the color of navigation links based on which section of the page a user is currently viewing? Here's an example setup: <div id="topNav"> <ul> <li><a href="#contact">Contac ...

javascriptjqueryhtmlcssviewport

Experiencing an unexpected wait before the requestAnimationFrame?

Surprisingly, Internet Explorer is actually performing the way I want it to in this case :-) I developed a function for SVG animations using requestAnimationFrame (for simplicity, I left out the value calculations here ... but my initial test involved an ...

javascriptcssanimationsvgrequestanimationframe

After clicking multiple times within the modal, the modal popup begins to shift towards the left side

I successfully implemented a modal popup in my project, but encountered an issue where the popup moves to the left side if clicked multiple times. Despite searching extensively online, I have not been able to find a solution to this problem. Below is the ...

javascriptjqueryhtmlcss

Press on a circle to adjust its size to fit the section or division

Is it possible to make a circle expand and fill the section/div when clicked? I want the circle to fill the screen upon clicking, and then have some text appear in its place. Before posting this, I searched on the web and came across this jsfiddle link. ...

javascripthtmlcss

replace the standard arrow key scrolling with a new custom event

Currently, I am in the process of creating a unique scroll box to address my specific needs. The standard html <select> box is not cutting it for me as I require two columns displayed, which I couldn't achieve with a regular <select>. Howe ...

javascriptjqueryhtmlhtml-select

Can someone provide guidance on how to align the navigation bar to the right in Bootstrap?

Having trouble setting up the navigation menu on the right hand side with Bootstrap, like most modern websites. <nav class="navbar navbar-expand-lg navbar-light bg-light"> <button class="navbar-toggler" type="button" data-togg ...

htmlcssbootstrap-4

Error displaying Font Awesome icons

I am currently facing challenges with managing my assets using webpack. I have installed font-awesome via yarn and imported the .css files into my webpage. However, despite my HTML recognizing the classes from font-awesome.css, the icons I am attempting to ...

csswebpackfont-awesomeyarnpkgsymfony-3.3

The HTML marquee element allows text to scroll sideways or

Has the html marquee tag been phased out? If so, what are the current alternatives available for achieving a similar effect on modern browsers? I am looking to implement a basic marquee effect on my Joomla page. ...

html

The dragging and dropping feature for HTML input type="file" is not functioning properly in Edge and IE11

I've developed an Angular app using this sample where I have included only an input control on the screen. Within my project, I constructed a custom file-uploader component. While I am able to drag and drop files in Chrome, I encountered issues with d ...

htmlangularfile-uploadinternet-explorer-11microsoft-edge