CODEWITHSUNDEEP
htmlhtml-table
Graig
Graig

Reputation: 151

Table border left and bottom

I need to create border as per the below example.

HTML: 

<table width="770">
  <tr>
    <td>picture (border only to the left and bottom ) </td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td>picture (border only to the left and bottom) </td>
  </tr>
</table>

Upvotes: 12

Views: 132384

Answers (3)

masih arastooyi
masih arastooyi

Reputation: 545

you can use these styles: 

style="border-left: 1px solid #cdd0d4;"  
style="border-bottom: 1px solid #cdd0d4;"
style="border-top: 1px solid #cdd0d4;"
style="border-right: 1px solid #cdd0d4;"

with this you want u must use 

<td style="border-left: 1px solid #cdd0d4;border-bottom: 1px solid #cdd0d4;">

or

<img style="border-left: 1px solid #cdd0d4;border-bottom: 1px solid #cdd0d4;">

Upvotes: 28

symlink
symlink

Reputation: 12209

You need to use the border property as seen here: jsFiddle

HTML:

<table width="770">
    <tr>
        <td class="border-left-bottom">picture (border only to the left and bottom ) </td>
        <td>text</td>
    </tr>
    <tr>
        <td>text</td>
        <td class="border-left-bottom">picture (border only to the left and bottom) </td>
    </tr>
</table>`

CSS:

td.border-left-bottom{
    border-left: solid 1px #000;
    border-bottom: solid 1px #000;
}

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167162

Give a class .border-lb and give this CSS

.border-lb {border: 1px solid #ccc; border-width: 0 0 1px 1px;}

And the HTML

<table width="770">
  <tr>
    <td class="border-lb">picture (border only to the left and bottom ) </td>
    <td>text</td>
  </tr>
  <tr>
    <td>text</td>
    <td class="border-lb">picture (border only to the left and bottom) </td>
  </tr>
</table>

Screenshot

Fiddle: http://jsfiddle.net/FXMVL/

Upvotes: 6

Related Questions