How to remove the space between cells in tables | CSS tutorial


Cell’s margin and padding property will have a default value, so by setting the margin and padding to 0 wont remove the gap between cells, to remove these gaps we have use the border-collapse property and set the value to collapse.
 
An example use of border-collapse property:


CSS Code:
table{ border:2px #0CF solid;  margin:10% auto 10% auto; border-collapse:collapse;}
table td{border:2px #0CF solid;}


HTML Code:

<table width="200" border="0">
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Year</th>
    <th scope="col">Country</th>
  </tr>
  <tr>
    <td>purush</td>
    <td>1988</td>
    <td>India</td>
  </tr>
  <tr>
    <td>Dave</td>
    <td>1988</td>
    <td>United States</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>1989</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Matthew</td>
    <td>1999</td>
    <td>Japan</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>1989</td>
    <td>Canada</td>
  </tr>
</table>
border collapse property using CSS


border collapse property using CSS


Comments

  1. Cool! Your blog is full of informative thought about web development. Please continue being kind and helpful to us for posting tutorial about this topic. :D

    Web developer in Philippines-->http://www.myoptimind.com/web-design-outsourcing-philippines

    ReplyDelete

Post a Comment

Thanks for Visiting for any questions or suggestions please comment below
Cheers,

Popular posts from this blog

How CSS3 Works