To achieve the look of a table with missing borders, you can use CSS to remove the top

I have been attempting to create a table where the last column cells (including the header) do not have a right, top, or bottom border. Despite my efforts in searching for solutions, I have not been successful in implementing what I have found.

You can see what I have tried in this fiddle: https://jsfiddle.net/prtome/taqge61v/

HTML

<table class="asktable">
<thead>
<th> col1</th>
<th> col1</th>
<th class="no-border-right"> col no border</th>
</thead>
<tbody><td>a</td><td>b</td><td>cell no border</td></tbody>
</table>

CSS

.asktable {
  border-collapse: collapse;
  border: 1px solid #ccc; 
}
.asktable th {
  padding: 4px 8px;
  border: 1px solid #ccc;
}
.asktable td {
  padding: 4px 8px;
  border: 1px solid #ccc;
}
.asktable th.no-border-right{
  border-top:0;
  border-right:0 !important;
  border-bottom:0;
}

I am unsure of where I may have gone wrong. Any help or guidance would be greatly appreciated. Thank you!

htmlcss

Answer №1

By removing the border from both th and td, you may still see the border due to a table-wide setting.

You can simplify your CSS by using :last-child instead of extra classes to remove the border, without the need for !important.

Below is the revised CSS code:

.asktable {
  border-collapse: collapse;
}
.asktable th {
  padding: 4px 8px;
  border: 1px solid #ccc;
}
.asktable td {
  padding: 4px 8px;
  border: 1px solid #ccc;
}
.asktable th:last-child,
.asktable td:last-child {
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
}
<table class="asktable">
  <thead>
    <th>col1</th>
    <th>col1</th>
    <th class="no-border-right">col no border</th>
  </thead>
  <tbody>
    <td>a</td>
    <td>b</td>
    <td>cell no border</td>
  </tbody>
</table>
<p>
  <br>
</p>

<table class="asktable no-border-right">
  <thead>
    <th>col1</th>
    <th>col1</th>
    <th class="no-border-right">col no border</th>
  </thead>
  <tbody>
    <td>a</td>
    <td>b</td>
    <td>ccell no border</td>
  </tbody>
</table>

Answer №2

Instead of using 0, consider using the hidden property:

  border-top:hidden !important;
  border-right:hidden !important;
  border-bottom:hidden !important;

Answer №3

How to eliminate the border from a table

.asktable {
    /*border: 1px solid #ccc;*/
    border-collapse: collapse;
}

Link to example on JSFiddle

Answer №4

To achieve a borderless design, utilize the CSS property border-xxx-color: transparent; wherever necessary. This will be instrumental in creating the desired effect.

.asktable {
    border-collapse: collapse;
    border: 1px solid #ccc; 
}
.asktable th {
    padding: 4px 8px;
    border: 1px solid #ccc;
}
.asktable td {
    padding: 4px 8px;
    border: 1px solid #ccc;
}

.asktable .no-border-right{
  border-top-color:transparent !important;
  border-right-color:transparent !important;
  border-bottom-color:transparent !important;
}
<table class="asktable">
<thead>
<th> col1</th>
<th> col1</th>
<th class="no-border-right"> col no border</th>
</thead>
<tbody>
<td>a</td>
<td>b</td>
<td>cell no border</td>
<p>
<br>
</p>

<table class="asktable no-border-right">
<thead>
<th> col1</th>
<th> col1</th>
<th  class="no-border-right"> col no border</th>
</thead>
<tbody>
<td>a</td>
<td>b</td>
<td>ccell no border</td>
</tbody>
</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

Select an HTML element that does not have a class or ID attribute

Is there a way to select and apply styles to a div that is nested within another div without any id or class? <div class="wrapper"> <div> </div> <div> </div> <div> </div> </div> Wh ...

htmlcss

Create a border around the text using a strokeoutline

I'm attempting to apply an outline to text using CSS. The issue I'm facing is that the shadow doesn't work well for perfectly stroked text. Is there a way to achieve this with just CSS? Below is the code snippet I am currently using: . ...

htmlcss

An NPObject method error occurred when invoking a critical function in a PhoneGap project

Is there a way to call an Android Activity from a JavaScript function? I have tried one method, but it keeps showing an error - "Method Called on NPObject". Can anyone help me solve this issue? It's really frustrating. I would highly appreciate any e ...

javajavascriptandroidhtml

Implementing CSS keyframe animations in a customized Material UI component using React, Material UI, and JSS

I'm facing an issue with adding a CSS keyframe animation to my Material UI custom styled component. Whenever I try to add a keyframe animation, it throws an error in my code setup: const PulsatingCircle = styled("div")(({ theme, }) => ( ...

cssreactjsmaterial-uijss

Ways to showcase a website within an HTML document using a URL?

Is it possible to show 2 webpages on a single aspx webpage? For instance, When a user opens the link for www.mywebsite.com, I would like to display both www.google.com and www.bing.com on my homepage. Behind the scenes, I will call two separate URLs an ...

javascripthtmlcssasp.net

When I retrieve a URL from PHP, I receive XY data in JSON format. The output appears as [{"status":"ok","data":{"latitude":0.625,"longitude":0.855}}], but the final outcome is reported as "undefined"

When I try to retrieve XY coordinates from a URL in JSON using PHP, the returned result looks like [{"status":"ok","data":{"latitude":0.625,"longitude":0.855}}]. However, the end result shows as "undefine ...

htmljqueryjson

Aligning text vertically in Bootstrap

Seeking assistance on how to vertically center text within a responsive grid. Can anyone provide guidance? <div class="col-md-4"> <h1>YOU WON'T BE ABLE TO</h1> </div> ...

htmlcsstwitter-bootstrap-3

Adding custom styles to an unidentified child element in React using Material-UI

When the function below is executed in a loop, I need to include styles for the icon which will be passed as an argument to the function. The icon element will be an unspecified React Material-UI Icon component. const renderStyledCard = (lightMode, headi ...

javascripthtmlcssreactjsmaterial-ui

CSS Dialect Debate: Container or Wrapper - Which is the Best Term to

Can you explain the distinction between a container and a wrapper, as well as their respective meanings? ...

htmlcss

What is the best way to transmit UTF-8 Arrow &#8594; from typescript to html and showcase it effectively?

When working with HTML, I often find myself creating a div with a tooltip that is connected to a function. Here's an example of what I typically use: <div *ngFor="let user of users"> <div class="myClass" [matToolt ...

javascripthtmlangulartypescripttooltip

How to apply bold styling to text with DOM Events

I am currently in the process of learning JavaScript and decided to practice by creating a text editor. The goal is to type something, click a button to change it to upper or lower case, bold, or italicize. While I successfully implemented the uppercase an ...

javascripthtmlcss

Login validation errors in Devise are not being enforced properly

I have implemented devise for handling login and signup functionalities on my website. However, I am encountering an issue with validations on the sign-in page. Here is the code snippet I am using: sessions/new.html.erb <%= form_for(resource, as: reso ...

htmlruby-on-railsvalidationerror-handlingdevise

The vertical tab layout in HTML and CSS is experiencing an issue where the active tab is not being shown above the

Currently, I am developing a web page featuring vertical tabs where each tab corresponds to an image and some content. However, the problem lies in the fact that the active tab is not displaying above the image as expected. In my attempt to resolve this i ...

htmlcsswebbootstrap-4

Tips on automatically changing the background image every few seconds

As a newcomer to Angular and programming in general, I am facing an issue with changing the background image of my Page using the setInterval method. The intended behavior is for it to change every second, but for some reason, it changes much faster than t ...

htmlangulartypescriptsetinterval

Is it possible to use Selenium with Python for copying and pasting

Is there a way to use control + A in Selenium Python to select text and then retrieve the highlighted text? ...

javascriptpythonhtmlselenium-webdriverweb-scraping

jQuery - encountering issues setting CSS properties within an AJAX callback function

I'm struggling with a jquery ajax callback function to change the background color of a table cell. Despite no errors in Firebug, my code isn't working as expected. Here's the code I have: $(".tariffdate").click(function () { var proper ...

cssjquerycallbackbackground-color

What is preventing me from merging font sub properties?

When working with CSS, you have the option to combine sub-properties. For example, instead of defining a border like this: border-style: solid; border-width: 1px; border-color: #555; You can use a single declaration for the border property as a shorthand ...

css

Locating Substrings with CSS Selectors

Looking for a CSS Selector that can handle varying item numbers like span[label='./cakes/item1/./linkText']. I need one selector that works with any range of numbers. I checked out a tutorial on this but no success. The attempted solution was: ...

cssseleniumcss-selectors

Extracting text from HTML tags can be quite tricky, especially when you need the text within a specific tag like <td> but not within any nested tags like <

Is there a way to extract only the numbers from the <td> tag and ignore any text within the <strong> tag that is nested inside it? I am currently using selenium code but it returns the entire content of the <td> tag. Python Code: wait. ...

pythonhtmlseleniumweb-scrapingcss-selectors

Picture in the form of a radio button

Is there a way to use an image instead of a radio button in my AngularJS form? I have managed to hide the radio button using CSS, but it disables the checked event. How can I make the image clickable? position: absolute; left: -9999px; Here is the code s ...

javascripthtmlcssangularjs