Two Column Thin Table

Author: MikeW    Date: 2016-08-15 22:32   

HTML Table

Here is an example of the a two column table with a thin border. Source code and links to the code follow.

Column 1 Column 2
Item 1A Item 1B
Item 2A Item 2B

TwoColTable.html

   1   <div>
   2   <style type="text/css">
   3 
   4 /* Two Column Table */
   5 #twoColThinTable { width:600px; border:1px solid #D9D5BE; border-collapse:collapse; margin:0px; background:white; font-size:0.8em; }
   6 #twoColThinTable td { padding:6px; }
   7 #twoColThinTable .titleRow { border-bottom: 1px solid #D9D5BE; font-weight:bold; font-size:1.1em; color:gray; text-align:center; }
   8 #twoColThinTable .row { border-bottom: 1px solid #D9D5BE; }
   9 #twoColThinTable .col1 { width:50%; text-align:center; }
  10 #twoColThinTable .col2 { width:50%; text-align:center; }
  11 #twoColThinTable .row:hover {background: #EDEDED;}
  12   
  13   </style>
  14 <!-- html table -->
  15 <h3>HTML Table</h3>
  16   <table border="1px" id="twoColThinTable">
  17     <thead>
  18       <tr class="titleRow">
  19         <td>Column 1</td>
  20         <td>Column 2</td>
  21       </tr>
  22     </thead>
  23     <tbody>
  24       <tr class="row">
  25         <td class="col1">Item 1A</td>
  26         <td class="col2">Item 1B</td>
  27       </tr>
  28       <tr class="row">
  29        <td class="col1">Item 2A</td>
  30        <td class="col2">Item 2B</td>
  31      </tr>
  32     </tbody>
  33   </table>
  34   </div>

TwocolTable.html text file