1

I am trying to add border at bottom side of my table header. but is is not showing without any error. I can see it is ok when I inspect elements.

Here is my code:

.cart_table{
width:100%;} 

.cart_table_header{
border-bottom: 1px solid #ffb215;
padding: 8px;
background-color: #dedede;}
.cart_table tr td{
border-bottom: 1px solid #ccc;
}

Here is Html

        <table class="cart_table" >
        <tr class="cart_table_header">
            <th> </th>
            <th> Item </th>
            <th> Price </th>
            <th> Quantity </th>
            <th> Total  </th>
            <th> Remove </th>
        </tr>
        <tr valign="middle">
            <td> <img src="images/product-image.jpg" height="50px width:50px;"> </img> </td>
            <td> Item name here</td>
            <td> $12</td>
            <td> 2</td>
            <td> $24</td>
            <td> <a href="#"> <img src="images/delete_icon_normal.png" > </img> </a> </td>
        </tr>
        <tr valign="middle">
            <td> <img src="images/product-image.jpg" height="50px width:50px;"> </img> </td>
            <td> Item name here</td>
            <td> $12</td>
            <td> 2</td>
            <td> $24</td>
            <td> <a href="#"> <img src="images/delete_icon_normal.png" > </img> </a> </td>
        </tr>
    </table>
Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164
aditi
  • 38
  • 1
  • 8

2 Answers2

2

Try adding border-collapse:collapse; to your table rules:

.cart_table {
    width:100%;
    border-collapse:collapse;
}

jsFiddle example

j08691
  • 204,283
  • 31
  • 260
  • 272
1

tr elements can't display border by themselves, but you can add it to the th elements

.cart_table_header th {
    border-bottom:1px solid black;
}

See this jsFiddle

If you want the border to look like a continuous line, you can add border-collapse:collapse; to the table class as @j08691 said.

ffflabs
  • 17,166
  • 5
  • 51
  • 77