[RESOLVED]3rd td on table not to have border

Hi, i want borders on all the tables td’s but what i want to do is on the 3rd td not to have a vertical border.

So instead of

TEXT  |  Text | Image

i would like

Text  | Text  Image.

Thanks.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
        <style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}

table td img
{
   
    vertical-align: middle;
    display: inline-block;
     text-align: center;
    
}
                     </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <div>

<br />
DATE: 19/10/2014
<br />
TIME: 05:13:25

</div>
<br />
<table  style="width:50%; border:1px solid" class="tg">                                  
                     <tr>                  
                     <th colspan="3" bgcolor="#AE5454" style="font-weight:bold;">
                     -TOTAL ADMISSIONS ALL SITES : 19856 
                     </th>
                     </tr>
<tr>
<td style="width:40%;">
Mall
</td>
  
<td style="width:40%;" >
4264
</td>
<td style="width:20%;">
<img src="image_temp/film_reel.png" alt=""  height="12" width="12" />
<img src="image_temp/film_reel.png" alt=""  height="12" width="12" />
<img src="image_temp/film_reel.png" alt=""  height="12" width="12" />
<img src="image_temp/film_reel.png" alt=""  height="12" width="12" />
</td>

</tr>

<tr>
<td style="width:40%;">
Ren
</td>
  
<td style="width:40%;" >
27074
</td>
<td style="width:20%;">
<img src="image_temp/film_reel.png" alt=""  height="12" width="12" />
<img src="image_temp/film_reel.png" alt=""  height="12" width="12" />
<img src="image_temp/film_reel.png" alt=""  height="12" width="12" />
<img src="image_temp/film_reel.png" alt=""  height="12" width="12" />
<img src="image_temp/film_reel.png" alt=""  height="12" width="12" />
</td>

</tr>

<tr>
<td style="width:40%;">
Fal
</td>
  
<td style="width:40%;">
676 
</td>
<td style="width:20%;">
<img src="image_temp/film_reel.png" alt=""  height="12" width="12" />
<img src="image_temp/film_reel.png" alt=""  height="12" width="12" />
</td>

</tr>

<tr>
<td style="width:40%;">
AG 
</td>
  
<td style="width:40%;">
459
</td>
<td style="width:20%;">
<img src="image_temp/film_reel.png" alt=""  height="12" width="12" />
<img src="image_temp/film_reel.png" alt=""  height="12" width="12" />
</td>

</tr>

<tr>
<td style="width:40%;">
OLTH
</td>
  
<td style="width:40%;"> <div></div>
29
</td>
<td style="width:20%;">
<img src="image_temp/film_reel.png" alt=""  height="12" width="12" />
</td>

</tr>






</table>
    </div>
    </form>
</body>
</html>

add css
.tg td:nth-child(2){border-right:none}
.tg td:nth-child(3){border-left:none}

Great!

Can you explain the :nth-child(2) and :nth-child(3)?

What exactly going on here.

thanks.

sapator

Great!

Can you explain the :nth-child(2) and :nth-child(3)?

What exactly going on here.

thanks.

yes syntax : nth-child([position of td in parent tr])
example your code: we need remove border-left (of td position 3 ) and border-right(of td position 2)

got it.

Thanks.

Leave a Reply