CODEWITHSUNDEEP
htmlcsscss-tables
Razia sultana
Razia sultana

Reputation: 2211

How to remove table border on a single row?

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 no 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 appearing but the side ones remain. Does anyone know if there is a way to override the inherited border property for that row?

Upvotes: 0

Views: 5381

Answers (4)

Bhavin Shah
Bhavin Shah

Reputation: 2482

try this.

  table {
       border-collapse:collapse;
    }

    td {
        border:none;
    }

Upvotes: 2

user6412824
user6412824

Reputation:

try this,working fine

<style>
 .border {
   border:solid 1px #000;
 }
.border-head {
 border-bottom:solid 1px #000;
 }
</style>

<table width="300" border="0" cellpadding="0" cellspacing="0" class="border" >
<thead>
 <tr>
  <td class="border-head">&nbsp;</td>
  <td class="border-head">&nbsp;</td>
  <td class="border-head" >&nbsp;</td>
 </tr>
</thead>
<tr>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
 <td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

Upvotes: 0

Asifuzzaman
Asifuzzaman

Reputation: 1783

hello See the below fiddle as you mentioned the merge row I did this for both border and without border in the rows .hope it helps 

<table>
<thead>
<tr>
  <th class="col1">1</th>
  <th class="col2">2</th>
  <th class="col3">3</th>
 </tr>
 </thead>
 <tr class="first">
<td>asdas</td>  
<td>asdas</td>
 <td >boooo</td>
</tr>
 <tr class="second">
 <td>asdas</td>   
 <td>asdas</td>
 <td>asdas</td>
 </tr>
</table>

see the below fiddle fiddle demo

Upvotes: 0

Mohammad Sadiqur Rahman
Mohammad Sadiqur Rahman

Reputation: 5523

You have to set border of your td or th "none"; May be this will help hide cells border using css

Upvotes: 1

Related Questions