1 reply [Last post]
mice-pace
mice-pace's picture
Offline
newbie
Last seen: 2 years 18 weeks ago
Timezone: GMT+11
Joined: 2011-12-09
Posts: 3
Points: 5

i have a table with the following class:

.multicolor {
 border: 1px solid #000000;
}

and for one specific table row i wanted to remove the left and right borders, replacing them with top and bottom so that it looks like one table is ending and another is beginning. Here's how i was trying it and not having any luck

<tr style="background-color:transparent; border-style:solid none solid none; border-width:1px 0px 1px 0px">
					<td colspan="7" style="background-color:transparent; border-style:solid none solid none; border-width:1px 0px 1px 0px">
<br></td>
					</tr>

The top and the bottom borders are apperaing, but the side ones remain. Does anyone know if there is a way to override the inherited border property for that row?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 35 weeks 3 days ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

If the border is on the table itself

...then you won't be able to remove it just for one row because the table is the parent and wraps around everything else. For most elements you could use negative left and right margins to drag the child element outside the boundaries of the parent, but I don't think that'll work for tables, so instead, remove the border from the table and instead apply it to each individual row or cell. That way you can then set a class to turn it for certain rows/cells.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference