CODEWITHSUNDEEP
csstwitter-bootstrap
Haz_ah
Haz_ah

Reputation: 165

Table-row border is invisible

I'm using the bordered table class to style a table.

However, for some of the rows, I need to change the left-border of a table cell yet retain the appearance of a border around the whole table.

To do this, I have tried to re-style the table cell left-border and add a left-border to the table row.

I can remove the table cell left-border, however the new table row left-border is invisible.

.table tr.topic_row {
    border-left: 3px solid red;
}

.table td.topic_title {
    border-left: none;
}

You can see that the table-row border-appears to be invisible: https://i.sstatic.net/M5lsO.png

And yet it should be there: https://i.sstatic.net/crMQA.png

Any advice on how i can get the table row border to be visible would be greatly appreciated :)

Edit for clarification:

The issue here is, why isn't the table row border showing. Even though it should be there it isn't.

Upvotes: 6

Views: 2219

Answers (2)

Jakub Hnízdil
Jakub Hnízdil

Reputation: 21

Try this:

.table tr.topic_row td {
    border-left: 3px solid red;
}

.table td.topic_title {
    border-left: none;
}

Upvotes: 1

Mark Eagleton
Mark Eagleton

Reputation: 165

Try applying the border color to the first table cell in the row rather than the table row itself:

.topic_row td:first-child {
    border-left: 3px solid red;
}

Upvotes: 0

Related Questions