CSS one-pixel table border

<html>
  <head>
    <title>1-pixel table border</title>
    <style type="text/css">
      table, td{
          border-color: #600;
          border-style: solid;
      }
 
      table{
          border-width: 0 0 1px 1px;
          border-spacing: 0;
          border-collapse: collapse;
      }
 
      td{
          margin: 0;
          padding: 4px;
          border-width: 1px 1px 0 0;
          background-color: #FFC;
      }
    </style>
  </head>
 
  <body>
    <table>
    <tr>
        <td>Cell 1</td> <td>Cell 2</td>
    </tr>
    <tr>
        <td>Cell 3</td> <td>Cell 4</td>
    </tr>
    </table>
 
  </body>
</html>

CSS one-pixel table border - short version

<html>
  <head>
    <title>1-pixel table border</title>
    <style type="text/css">
      table {
        background-color:#FFF;
        width:100%;
        border-collapse:collapse;
      }
 
      /* and of course a default one */
      td, th {
        border: 1px solid black;
        padding: 5px;
        text-align: center;
      }
 
      th{ background-color: gray; }
 
    </style>
  </head>
 
  <body>
    <table>
      <tr>
        <td>Cell 1</td> <td>Cell 2</td>
      </tr>
      <tr>
        <td>Cell 3</td> <td>Cell 4</td>
      </tr>
    </table>
 
    <br />
  </body>
</html>

HTML, CSS

About the author

Xuan Ngo is the founder of OpenWritings.net. He currently lives in Montreal, Canada. He loves to write about programming and open source subjects.