Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 428
Graig Avatar asked Jan 26 '13 10:01

Graig


People also ask

What 3 types of border styles can a table have?

border-bottom-style. border-left-style. border-right-style.

How do I remove bottom border from table?

Remove individual borders Click in any cell to show the Table Design tab. On the Table Design tab, in the Line Style box, click No Border.

How do you give a table border style in HTML?

To create table border in HTML, the border attribute was used. But the introduction of HTML5, deprecated the border tag. Create table border using the CSS property border. Set table border as well as border for <th> and <td>.


2 Answers

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;"> 
like image 171
masih arastooyi Avatar answered Sep 28 '22 03:09

masih arastooyi


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/

like image 27
Praveen Kumar Purushothaman Avatar answered Sep 28 '22 03:09

Praveen Kumar Purushothaman