How to make some table cell borders disappear when using the table-bordered class?

Question

My goal is to eliminate the top and bottom border of a specific table cell (td). I was able to remove the inside border, but the top and bottom border still there.

This is my html code

This is my css style

table td {
    position: relative;
}

table  input {

    height: 100%;
    width: 100%;
    
}

.w-4 {
    width: 4%;
}

.w-8 {
    width: 8%;
}

.w-10 {
    width: 10%;
}

.w-40 {
    width: 40%;
}

.no-top-bottom {
    border-top: none !important;
    border-bottom: none !important;
}

My problem is that the td element at the top and bottom still have a border. It just like the picture below. I woyuld like to remove the borders marked in yellow too.

FluffyKitten · Accepted Answer

You were removing the border from the cell, but a border was also being added by the .table-bordered class on

.

Removing the border from the table will work:

table.table-bordered { border:none;}

The .table-bordered class will still add borders to all the cells, but won't force a border around the outside of the table, so your .no-top-bottom CSS will work now.

Working snippet:

table.table-bordered { border:none;}

table td {
    position: relative;
}

table  input {

    height: 100%;
    width: 100%;
    
}

.w-4 {
    width: 4%;
}

.w-8 {
    width: 8%;
}

.w-10 {
    width: 10%;
}

.w-40 {
    width: 40%;
}

.no-top-bottom {
    border-top: none !important;
    border-bottom: none !important;
}

Label 1			Label 2
Label 1			Label 2
Label 1			Label 2
Label 1			Label 2

How to make some table cell borders disappear when using the table-bordered class?

Answers (1)

Related Questions