Apply a 2 pixel top border to an HTML table

Is there a way to add a double border at the headcell without using background images?

Currently, I have a white color border top and want to add a grey color border on top of the white one. Is it possible to achieve something like #ccc and #fff for border-top?

Current Layout

https://i.stack.imgur.com/r4KPE.png

Desired Layout

https://i.stack.imgur.com/LvHTm.png

HTML & CSS Code:

table.hor-zebra {
  width: 100%;
  text-align: left;
  border-collapse: collapse;
  border: #cccccc 1px solid;
}

table.hor-zebra>thead {
  border-top: #cccccc 1px solid;
}

table.hor-zebra>thead>tr>th {
  background: #e2e2e2;
  border-top: #ffffff 1px solid;
  border-bottom: #cccccc 1px solid;
  padding: 4px;
  color: #000;
}

table.hor-zebra>tbody>tr>td {
  background: #f3f3f3;
  border-bottom: #cccccc 1px solid;
  padding: 8px 4px 8px 4px;
}

table.hor-zebra>tbody>tr>td.odd {
  background: #f8f8f8;
  border-bottom: #cccccc 1px solid;
}

table.hor-zebra>tbody>tr:hover td {
  background: #faf4f2;
}
<table class="hor-zebra">
  <thead>
    <tr>
      <th scope="col">
        <span>Title</span>
      </th>
      <th scope="col">
        <span>Date</span>
      </th>
      <th scope="col">
        <span>Actions</span>
      </th>
    </tr>
  </thead>

  <tbody>

    <tr>
      <td class="odd">
        <a href="x">x</a>
      </td>
      <td class="odd">
        <span>2017-10-30 19:06:27</span>
      </td>
      <td class="odd">
        <span>
<a href="index.php?open=pages&amp;page=edit_page&amp;page_id=1&amp;editor_language=en">Edit</a>
&middot;
<a href="index.php?open=pages&amp;page=delete_page&amp;page_id=1&amp;editor_language=en">Delete</a>
</span>
      </td>
    </tr>

    <tr>
      <td>
        <a href="x">awd</a>
      </td>
      <td>
        <span>2017-10-30 19:06:35</span>
      </td>
      <td>
        <span>
<a href="index.php?open=pages&amp;page=edit_page&amp;page_id=2&amp;editor_language=en">Edit</a>
&middot;
<a href="index.php?open=pages&amp;page=delete_page&amp;page_id=2&amp;editor_language=en">Delete</a>
</span>
      </td>
    </tr>

    <tr>
      <td class="odd">
        <a href="x">awd</a>
      </td>
      <td class="odd">
        <span>2017-10-30 19:14:53</span>
      </td>
      <td class="odd">
        <span>
<a href="index.php?open=pages&amp;page=edit_page&amp;page_id=3&amp;editor_language=en">Edit</a>
&middot;
<a href="index.php?open=pages&amp;page=delete_page&amp;page_id=3&amp;editor_language=en">Delete</a>
</span>
      </td>
    </tr>

    <tr>
      <td>
        <a href="x">awd</a>
      </td>
      <td>
        <span>2017-10-30 19:15:07</span>
      </td>
      <td>
        <span>
<a href="index.php?open=pages&amp;page=edit_page&amp;page_id=4&amp;editor_language=en">Edit</a>
&middot;
<a href="index.php?open=pages&amp;page=delete_page&amp;page_id=4&amp;editor_language=en">Delete</a>
</span>
      </td>
    </tr>

    <tr>
      <td class="odd">
        <a href="x">awd</a>
      </td>
      <td class="odd">
        <span>2017-10-30 19:16:47</span>
      </td>
      <td class="odd">
        <span>
<a href="index.php?open=pages&amp;page=edit_page&amp;page_id=5&amp;editor_language=en">Edit</a>
&middot;
<a href="index.php?open=pages&amp;page=delete_page&amp;page_id=5&amp;editor_language=en">Delete</a>
</span>
      </td>
    </tr>

  </tbody>
</table>

It's possible with CSS!

htmlcss

Answer №1

To fix the issue, make sure to reset border-spacing:0; instead of using border-collapse:collapse;. This will prevent the collapse of borders on th elements and the table itself, showing all border colors properly.

https://www.w3.org/TR/CSS21/tables.html#value-def-table, https://www.w3.org/wiki/CSS/Properties/border-collapse

border

If you set border-collapse to collapse on the table element, the various border properties will affect columns only. Borders applied on columns and column groups are considered in the conflict resolution algorithm that determines the border styles at every cell edge.

table.hor-zebra {
  width: 100%;
  text-align: left;
  border-spacing:0;
  border: #cccccc 1px solid;
}

table.hor-zebra>thead {
  border-top: #cccccc 1px solid;
}

table.hor-zebra>thead>tr>th {
  background: #e2e2e2;
  border-top: #ffffff 1px solid;
  border-bottom: #cccccc 1px solid;
  padding: 4px;
  color: #000;
}

table.hor-zebra>tbody>tr>td {
  background: #f3f3f3;
  border-bottom: #cccccc 1px solid;
  padding: 8px 4px 8px 4px;
}

table.hor-zebra>tbody>tr>td.odd {
  background: #f8f8f8;
  border-bottom: #cccccc 1px solid;
}

table.hor-zebra>tbody>tr:hover td {
  background: #faf4f2;
}
<table class="hor-zebra">
  <thead>
    <tr>
      <th scope="col">
        <span>Title</span>
      </th>
      <th scope="col">
        <span>Date</span>
      </th>
      <th scope="col">
        <span>Actions</span>
      </th>
    </tr>
  </thead>

  <tbody>

    <tr>
      <td class="odd">
        <a href="x">x</a>
      </td>
      <td class="odd">
        <span>2017-10-30 19:06:27</span>
      </td>
      <td class="odd">
        <span>
<a href="index.php?open=pages&amp;page=edit_page&amp;page_id=1&amp;editor_language=en">Edit</a>
&middot;
<a href="index.php?open=pages&amp;page=delete_page&amp;page_id=1&amp;editor_language=en">Delete</a>
</span>
      </td>
    </tr>

    <tr>
      <td>
        <a href="x">awd</a>
      </td>
      <td>
        <span>2017-10-30 19:06:35</span>
      </td>
      <td>
        <span>
<a href="index.php?open=pages&amp;page=edit_page&amp;page_id=2&amp;editor_language=en">Edit</a>
&middot;
<a href="index.php?open=pages&amp;page=delete_page&amp;page_id=2&amp;editor_language=en">Delete</a>
</span>
      </td>
    </tr>

    <tr>
      <td class="odd">
        <a href="x">awd</a>
      </td>
      <td class="odd">
        <span>2017-10-30 19:14:53</span>
      </td>
      <td class="odd">
        <span>
<a href="index.php?open=pages&amp;page=edit_page&amp;page_id=3&amp;editor_language=en">Edit</a>
&middot;
<a href="index.php?open=pages&amp;page=delete_page&amp;page_id=3&amp;editor_language=en">Delete</a>
</span>
      </td>
    </tr>

    <tr>
      <td>
        <a href="x">awd</a>
      </td>
      <td>
        <span>2017-10-30 19:15:07</span>
      </td>
      <td>
        <span>
<a href="index.php?open=pages&amp;page=edit_page&amp;page_id=4&amp;editor_language=en">Edit</a>
&middot;
<a href="index.php?open=pages&amp;page=delete_page&amp;page_id=4&amp;editor_language=en">Delete</a>
</span>
      </td>
    </tr>

    <tr>
      <td class="odd">
        <a href="x">awd</a>
      </td>
      <td class="odd">
        <span>2017-10-30 19:16:47</span>
      </td>
      <td class="odd">
        <span>
<a href="index.php?open=pages&amp;page=edit_page&amp;page_id=5&amp;editor_language=en">Edit</a>
&middot;
<a href="index.php?open=pages&amp;page=delete_page&amp;page_id=5&amp;editor_language=en">Delete</a>
</span>
      </td>
    </tr>

  </tbody>
</table>

Answer №3

When you find yourself in a situation where you need to style something before a child element, you can utilize Pseudo :before.

Give this a try:

table.hor-zebra>thead>tr>th {
 background: #e2e2e2;
 border-top: #ffffff 3px solid;
 border-bottom: #cccccc 1px solid;
 padding: 4px;
 color: #000;
 posistion:relative;
 }
table.hor-zebra>thead>tr>th:before{
  content:"";
  position:absolute;
  height:2px;
  width:100%;
  background-color:#cccccc;
  top:-1px;
  left:-1px;
}

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

Why is my CSS causing a div with 100% width to be slightly taller than expected?

I am working on a website that I want to adjust to the width of different browsers. Everything seems to be functioning properly, except for the fact that the parent div containing the 100% width divs always appears around 5 pixels too tall. This is causin ...

csshtmlwidth

Using javascript, add text to the beginning of a form before it is submitted

I'm trying to modify a form so that "https://" is added to the beginning of the input when it's submitted, without actually showing it in the text box. Here's the script I have so far: <script> function formSubmit(){ var x ...

javascripthtmlforms

What steps do I need to take to launch an embedded kml tour?

This marks the beginning of my journey into the world of online forums! I used to rely on Stack Exchange for answers to my questions, but most of the time, someone else had already asked what I needed to know. It goes to show how effective this website is. ...

htmlrgoogle-mapskmlgoogle-earth

Show child element when hovering over parent element

My current issue involves a button animation I am attempting to create. I envision a description box smoothly sliding out from behind a button whenever it is hovered over. However, my current implementation lacks the desired transition effect and simply ju ...

htmlcss

One effective way to redirect after a PUT request and display a one-time message

Here's what I'm aiming for in terms of desired behaviour: A user navigates to a password change web page. The user completes the form and it is sent via PUT request to our REST server. Upon successful completion, the user is redirected to their ...

javascriptjqueryhtmlajaxhttp-redirect

Is it necessary to always include all styles for jQuery UI separately in my project?

While reading various articles, I have noticed a common suggestion to explicitly bundle each jQueryUI .css file, such as the answer provided on How to add jQueryUI library in MVC 5 project?. However, upon examining the .css files within the Content/themes/ ...

jquerycssasp.net-mvcjquery-uiasp.net-mvc-5

The image within the element is being cropped despite having a higher z-index

On my page, I am dynamically generating a table using an API request. Each row in the table has an icon that, when hovered over by the user, displays an image associated with that item. However, I seem to have misunderstood how z-index functions, as I have ...

htmlcss

I can't figure out why my jQuery isn't recognizing the :nth-child(2) selector

Here is the jQuery code I am using: $(".score-window a:first-child").click(function() { $(".score-window").hide(); $(".login-window").show(); }); $(".score-window a:nth-child(2)").click(function() { $(".score-window"). ...

javascriptjqueryhtmljquery-selectors

The Angular Tooltip feature is unable to interpret the characters "' '" or "' '"

Let me explain the scenario: I am receiving a list of objects from my back-end service, which I then break apart using ngFor and display accordingly. Each item in the list has an associated toolTip that provides additional information. The info for each i ...

htmlangulartypescript

When the progress bar is clicked, the background color changes and then changes back again

https://www.w3schools.com/code/tryit.asp?filename=FG1ZE0NJ4ZX7 https://i.stack.imgur.com/Bnd0k.png I have created a progress bar that resembles the screenshot provided. When I hover over it, the color changes to green. However, I am looking for assistanc ...

javascripthtmlcsstwitter-bootstrap

CSS and HTML modal not closing

I've been working on creating a custom popup using HTML, CSS, and some jQuery functions. My idea was that when I click on the main div, it should expand in size and display a cancel button, which it does successfully. However, the issue arises when tr ...

jqueryhtmlcss

Troubles with loading images on Node.js, Express, and EJS powered Bootstrap 5 navbar

Currently, I am in the process of creating a website using express/node.js/ejs. However, I am facing challenges when it comes to constructing a navbar with Bootstrap 5.0. In my app.js file, I have included express.static: app.use(express.static('publi ...

javascripthtmlexpressejsbootstrap-5

What is the process for updating the h1 header with text entered into an input field?

I'm working on an assignment that requires me to change the h1 heading to reflect whatever is entered into the input field. To accomplish this, I need to create a function using getElementByID. Here's what I've done so far: <!DOCTYPE htm ...

javascripthtmlinputgetelementbyid

What is the best way to connect information from an HTML input field to a JavaScript object with the help of AngularJS?

As a beginner in AngularJS, I'm struggling to find the best approach to achieve my goal. I aim to create a grid of input tags with type=number in my HTML and have it set up so that whenever the value is increased, a new object is added to a list. Simi ...

javascripthtmlangularjsionic-frameworkangularjs-bindings

Experimenting with HTML and CSS to enhance email presentation

I am currently developing a Django application that requires sending out Emails with HTML templates. These email templates include images and dynamic variables from the Django context. However, each time I make changes to the inline CSS or HTML, I have t ...

htmlcssdjangoemail

The padding on the button inside the v-card is not being applied as expected

I am facing an issue with the following code snippet: <v-card height="200"> <v-card-actions class="mb-0"> <v-btn flat color="orange">Share</v-btn> <v-btn flat color="orange">Explore</v-btn> & ...

javascriptcssvue.jsvuetify.js

Troubleshooting a Scrolling Problem in AngularJS页面

My web page design incorporates a header, content body, and footer using Responsive and Angular Material. Within the Content Body, there is an md-content element containing multiple text paragraphs enclosed in <p>. I have set the overflow to auto (ov ...

htmlcssangularjsscrollbar

To ensure responsiveness in JavaScript, adjust the width to 100%

Recently, I came across this piece of code: <div style="text-align:center; max-width:500px; width:100%; margin:auto"> <script type="text/javascript" src="transition_example.js"></script></div> Here is the content of transition ...

javascriptjqueryhtmlcss

The appropriate use of spacing after text in the context of HTML and

Why is it that when I add padding or margin, no extra space is created after the text? Here is the output: I have tried adding padding and margin after the Stay Tuned text, but it seems to be not working. Any insights on what might be causing this issue? ...

javascripthtmlcssanimationcss-animations

Ruby on Rails allows for the selection of values in a dropdown menu to trigger the visibility of different sections of HTML

As a newcomer to Rails, I was able to successfully implement the onclick function for a f.checkbox element. Now, my challenge lies in achieving a similar functionality for a f.select element within a _form. Below is the code snippet that works for a chec ...

javascriptruby-on-railshtmlruby-on-rails-5