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

Modifying the content within a DIV element

I want to make changes to my DIV. <div id="main"> <div id="one"> <div class="red"> ... </div> <img class="avatar" src="img/avatar1.jpg"/> <span class="name"> John < ...

javascriptjqueryhtmldomweb

CSS inset box-shadow creates a gap between collapsed borders

I need help with a strange issue I'm facing. I have a table where border-collapse is set to collapse, and there's an unusual gap between the box-shadow inset and the border. The size of this gap increases as the border width gets larger. How can ...

htmlcss

Could someone shed some light on why hjk fails to print whenever I click?

Why is the code not printing 'hgk' every time I click? The debounce function should run and print 'hgk' each time the button is clicked. Can someone please explain why this is not happening? const debounce=(fn,delay)=>{ ...

javascripthtmlreactjsdomdom-events

Activate on click using JavaScript

When a link with the class .active is clicked, I want to use a JavaScript function to deactivate any other active links. The structure of the code should be as follows: <ul class="product"> <li><a href="#myanmar" class="active">Mya ...

javascriptjqueryhtmlcssonclick

Vuetify does not support Tailwind CSS styles

Initially, I integrated Tailwind CSS into my project. However, during the development process, I decided to give Vuetify a try. After adding Vuetify along with vuetify-loader, I encountered an issue where Vuetify functionality was working fine but the styl ...

csslaravelvue.jsvuetify.jstailwind-css

The link does not respond to the first click

I'm having an issue with the search feature on my website. The page includes an auto-focused text input element. As the user types, an ajax request is made and JQuery fills a div with search results. Each result is represented by an <li> elemen ...

javascriptjqueryhtml

Is there a way to create a new perspective for Ion-Popover?

Looking for a solution: <ion-grid *ngIf="headerService.showSearch()"> <ion-row id="searchbar" class="main-searchbar ion-align-items-center"> <ion-col size="11"> ...

htmlcssangularionic-framework

Is it possible to use CSS transitions to animate an absolute positioned element?

I am having trouble getting a CSS transition to work for animating an element's position change. I have tried using the all properties in the transition declaration like in this example: http://jsfiddle.net/yFy5n/3/ However, my goal is to only apply ...

csscss-transitions

I am experiencing an issue on my webpage where clicking on the login button does not seem

My website code includes: <form method="POST" action="{% url 'lawyerdash' %}"> {% csrf_token %} Username<input type="text" name="username"><br> Password<input type="password" name="password" ><br> & ...

htmldjango

How to Utilize USB Devices with Node-Webkit?

I am in the process of creating a node-webkit application that must be compatible with all three major desktop operating systems (Windows, Mac, and Linux). My goal is to establish a connection between my app and a USB device that is plugged in, but I am en ...

htmlnode.jswebkitv8node-webkit

Seeking a template for a server-side programmer who lacks proficiency in CSS and design?

Hey there all you wise folks! So here's the deal - I'm a PHP/JavaScript wizard when it comes to logic and server-side stuff, but I really suck at design, CSS, and all things arty. Does anyone have any recommendations for a template or tool that ...

phphtmltemplatescss

Is there a way to update the color of a button once the correct answer is clicked? I'm specifically looking to implement this feature in PHP using CodeIgniter

Within my interface, I have multiple rows containing unique buttons. Upon clicking a button, the system verifies if it corresponds to the correct answer in that specific row. The functionality of validating the responses is already functional. However, I a ...

phpjavascriptjquerycsscodeigniter

How can I create a tooltip or something similar for an HTML input field?

Seeking a solution for adding additional information to an HTML input field while typing or hovering over it. Attempted the following code snippet: <input type="text" onmouseover="window.status='hello world'; return true;" name="TextInput" ta ...

html

Is there a way to ensure that the column widths in the Huxtable RTF output align perfectly with the widths of the HTML

It appears that the HTML output in huxtable has a column width setting that automatically adjusts to fit the content, creating an aesthetically pleasing output. On the other hand, the RTF output makes all columns equal width, which is not as visually appea ...

htmlrrtfhuxtable

Creating Layouts with Bootstrap 3

I'm exploring the codepen below in an attempt to mimic the appearance of the image provided consistently across all screen sizes. However, there are two issues that I am encountering - firstly, the green numbers on the first line which represent the d ...

javascriptjqueryhtmltwitter-bootstraptwitter-bootstrap-3

How to create a donut chart in Highcharts without an inner pie section?

I've been scouring the internet in search of a solution to create a basic donut chart using the Highcharts library. Most examples I come across show donut charts with both an inner pie and outer donut (see here). Is there a way to remove the inner pi ...

javascripthtmlhighchartsdonut-chart

I am having trouble showing the background image in the div

I created a 960 layout using 3 divs to easily organize child divs with images and text. However, I'm having trouble getting the background image of the first div to display. Can you help me figure out what I'm doing wrong? This is the concept f ...

csshtmlbackground-imagechildren

Removing the blue border around a button upon being clicked

Whenever I press my button, an unexpected event occurs. Is there a solution to avoid this issue? Thank you for your help! :) ...

htmlcssstyles

Give GetElementsByClassName a shot

Hey, have you tried using js ref_doc_getelementsbyClassName? "I keep getting the error message 'Uncaught TypeError: Cannot set property 'value' of null' " Check out this HTML code snippet: <input type="text" cla ...

javascripthtmljqueryclassname

Only one admin account can be accessed at a time by multiple logins

I am looking to add a new feature to my app where only one admin can log in at a time. If someone else tries to log in with the same admin ID on another device, a warning should be shown, indicating that the user is already logged in and cannot access the ...

htmlreactjs