Welcome Login

To remove separations between rows in an html table


To remove separations between rows in an html table, use: 'border-collapse: collapse;'

Eg:

<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>table css</title>

<style type='text/css'>
</style>

</head>

<body>
  <table>
    <tr style="background-color:green;">
      <td>head 1</td>
      <td>head 2</td>
      <td>head 3</td>
    </tr>
    <tr style="background-color:green;">
      <td>cell 1</td>
      <td>cell 2</td>
      <td>cell 3</td>
    </tr>
    <tr style="background-color:green;">
      <td>cell 1</td>
      <td>cell 2</td>
      <td>cell 3</td>
    </tr>
  </table>

</body>

</html>

 

Outputs:

css-tablerow1

 

To fix, use:

table 
{
    border-collapse: collapse;
}

 

 

Outputs:

css-tablerow2

 

 

 

 

For more information, see here.


Created on: Thursday, November 14, 2013 by Andrew Sin