Enhancing the appearance of tables by formatting the columns

I'm currently working on designing a table to achieve the look shown in the image. I'm specifically looking to style the last 2 columns to achieve this effect. After searching extensively on Google and Stack Overflow, I couldn't find a solution. Is it even possible to achieve this using HTML/CSS alone? Or would I need to explore creating an overlay with CSS and positioning it over the last 2 columns?

<table class="promo-table">
  <th>Product</th>
  <th>Model</th>
  <th>Reference</th>
  <th>Rate Price 2018</th>
  <th class="promo">Promo Price</th>

  <tr class="first-promo">
    <td>Front Axle Brake Pad Set</td>
    <td>117, 176, 246</td>
    <td>A 000 420 29 02</td>
    <td>$75.81</td>
    <td class="promo">$38.70</td>
  </tr>

  <tr>
    <td>Front Axle Brake Pad Set</td>
    <td>117, 176, 246</td>
    <td>A 000 420 29 02</td>
    <td>$75.81</td>
    <td class="promo">$38.70</td>
  </tr>

  <tr>
    <td>Front Axle Brake Pad Set</td>
    <td>117, 176, 246</td>
    <td>A 000 420 29 02</td>
    <td>$75.81</td>
    <td class="promo">$38.70</td>
  </tr>

</table>

htmlcsscss-tables

Answer №1

One strategy involves simulating a box by adjusting the borders of the cells accordingly. The headline can be achieved by adding a larger top border and using the pseudo element ::before.

It's important to note that this method only works if you apply border-collapse: collapse; to your table; otherwise, there might be spaces between the cell borders.

The benefit of this approach is that the size of the box automatically adjusts based on the content of the table. If you were to create the box as an overlay, changes in the table's content or column widths could pose a problem.

table {
  border-collapse: collapse;
}

th,
td {
  padding: 5px 10px;
  margin: 0;
}

table tr td:nth-child(4),
table tr th:nth-child(4) {
  border-left: 2px solid #17a4e4;
}

table tr td:nth-child(5),
table tr th:nth-child(5) {
  border-right: 2px solid #17a4e4;
}

table tr th {
  position: relative;
  border-top: 25px solid transparent;
}

table tr th:nth-child(4),
table tr th:nth-child(5) {
  border-top: 30px solid #17a4e4;
}

table tr:last-child td:nth-child(4),
table tr:last-child td:nth-child(5) {
  border-bottom: 2px solid #17a4e4;
}

table tr th:nth-child(4)::before {
  content: "Special Offer";
  text-transform: uppercase;
  color: white;
  position: absolute;
  top: -23px;
  left: 50%;
}
<table class="promo-table">
  <tr>
    <th>Product</th>
    <th>Models</th>
    <th>Reference</th>
    <th>RatePrice 2018</th>
    <th class="promo">Promo Price</th>
  </tr>
  <tr class="first-promo">
    <td>Set of Front Brake Pads</td>
    <td>117, 176, 246</td>
    <td>A 000 420 29 02</td>
    <td>€75.81</td>
    <td class="promo">€38.70</td>
  </tr>
  <tr>
    <td>Set of Front Brake Pads</td>
    <td>117, 176, 246</td>
    <td>A 000 420 29 02</td>
    <td>€75.81</td>
    <td class="promo">€38.70</td>
  </tr>
  <tr>
    <td>Set of Front Brake Pads</td>
    <td>117, 176, 246</td>
    <td>A 000 420 29 02</td>
    <td>€75.81</td>
    <td class="promo">€38.70</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

The Facebook comment section is taking control

<div class="fb-comments" data-href="https://www.facebook.com/pages/Societ%C3%A0-Ginnastica-Triestina-Nautica/149520068540338" data-width="270" data-num-posts="3"> I'm having trouble with the comment box extending past my div height and overlapp ...

phphtmlcssfacebook

What is the best way to align a div with a td within a table?

I have a table and I inserted a div inside it, but now the alignment with the td is off. I applied display: inline-block to both the td and div elements, but the td only shifted slightly. How can I correct this? Here's my HTML code for the table : ...

htmlcss

HtmlAgilityPack - Trouble extracting all rows of data from an HTML document

I am a beginner with HtmlAgilityPack and I find myself struggling with my code. It seems like I'm only able to retrieve the first row repeatedly. Could it be an issue with how I structured the tags in the file? Do let me know if more information is n ...

htmlvb.net

The method of altering a menu link in WordPress using jQuery varies according to whether the user is logged in or not

I need to update the last link on my menu. When a user is logged in, it should display a profile link; otherwise, it should show a sign-up link. ...

javascriptjquerycsswordpress

Sticky position applied and overlapping with the following container

I'm struggling with the CSS property position: sticky. In my layout, I have three boxes stacked one after another. Each box is styled with the class container from Bootstrap. The middle box, labeled as box-2, needs to be fixed in its position. To ach ...

htmlcssbootstrap-4

Show tooltip above stationary table header

I am having trouble getting a tooltip to display over a fixed scrolling header within a jquery datatable. To better illustrate the issue, I have created a jsfiddle: http://jsfiddle.net/75e4ssgv/4/ Here is the sample HTML code: <section> <h2 ...

htmlcssdatatables

Only output to the console if the data returned from an AJAX request has been

Here is a script that I created: <script type="text/javascript> $('.storage').html(""); setInterval(function(){ $.get('./playcommand.php', function(data) { if($('.storage').html() !== data){ ...

javascriptphpjqueryhtmlajax

Large header bar positioned above navbar in Bootstrap 4 design

Is there a way to add a pagewide bar above the navbar that can disappear in mobile view? <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark"> <div> Pagewide </div> < ...

csstwitter-bootstrapbootstrap-4

Modify the content within the <h2> Tag that needs updating with JavaScript

Looking for guidance on how to update the text within an HTML element using JavaScript. Any suggestions? The current setup is as follows: <h2 id="something">Text I want to change.</h2> I attempted to achieve this with: document.getElemen ...

javascripthtml

Arranging my form input fields in a neat vertical stack

@gnagy @Satwik Nadkarny I appreciate the help you both provided, and I wish I could give a plus to your responses (requires 15 rep sadly), but I have encountered another issue. After the first two text input fields, I added an additional input field for e ...

htmlcssformsinputfield

I am encountering an issue with my HTML parser as it fails to display the complete HTML code that is utilized by the webpage when I inspect the code. Below is the snippet of my code

` import requests from bs4 import BeautifulSoup as bs import html5lib from selenium import webdriver from selenium.webdriver.common.keys import Keys driver = webdriver.Chrome(executable_path=r'D:\Web Scraping\chromedriver.exe') url = ...

pythonhtmljsonweb-scrapingbeautifulsoup

JavaScript: table is not defined

When creating a table using Django models and JavaScript, I encountered an issue where the cells values of the table could not be accessed from another JavaScript function. The error message indicated that the table was "undefined". Below is the HTML code ...

javascripthtmldjango

Arrange the assortment of varying sized badges in a straight line

I have a variety of badges representing users. Some users have images displayed as blocks while others are represented by text inline. https://i.sstatic.net/BtDgo.png Within the container, we have the following structure: <div class="align-self-cente ...

htmlcsstwitter-bootstrapvertical-alignmenttwitter-bootstrap-4

Design featuring a fixed top row and a scrollable bottom row

I need to divide a div container into two vertical sections, one occupying 60% of the space and the other 40%. The top div (60%) should always be visible, while the bottom div (40%) should be scrollable if it exceeds its limit. I have tried different app ...

htmlcssjquery-mobile

Having trouble loading a CSS file in CodeIgniter?

I've added a link to my header.php and despite trying various solutions from stackoverflow, it still isn't working for me. Can someone please help? Thank you in advance :) Here's my folder structure: Main Folder: ci_attl - application ...

csshyperlink

Is HTML5 supported by IBM Worklight's MBS?

I'm having issues with my mobile browser simulator not recognizing certain HTML5 elements such as input date type, placeholder, localstorage, sessionStorage, and Video tags. Should I make any changes to fix this problem? ...

htmlibm-mobilefirstworklight-mbs

How can I make every tuple point to a unique link?

I am currently working on setting up different URLs for each tuple to display different department semesters when clicked within a table. After attempting to add an href tag before the echo in this code, I found that all tuples in the table were leading t ...

phphtmlhyperlink

The Platform for Organizing my Content

In the process of creating a Content Management System (CMS), I am exploring different development options. Below is a link to an illustration of the CMS design I have in mind; Figure: Proposed CMS layout Can the entire system be developed using PHP&apo ...

phpjqueryajaxhtmlcss

Beta version of Bootstrap 4 - Enhancing User Experience with ScrollSpy Feature

I've encountered an issue getting my anchors to smooth-scroll to the target text. Despite trying jQuery solutions from various sources, nothing seems to work inexplicably. Even ScrollSpy doesn't seem to do the trick. I'm currently working w ...

javascriptjqueryhtmlcsstwitter-bootstrap

The justify-content-center property in Bootstrap is failing to properly align content in a row to the center

I recently created a section using Bootstrap that contains 8 buttons, with 5 in the first row and 3 in the second. However, the alignment of the content is not as I envisioned. See the current layout below: Click here for image Here's how I want to ...

htmlcssbootstrap-4alignmentrow