getting only column borders using CSS - html

Question

I've the below HTML Table. and her i want to get only first row border and the rest only column borders only. as given in the screenshot. please let me know how i can do it in my css.
<table cellspacing="1" class="topbotcol">
<thead>
<tr>
<th valign="middle" class="colsep rowsep" align="center">
<span class="font-style-bold">Item</span>
</th>
<th valign="middle" class="colsep rowsep" align="center"> </th>
<th valign="middle" class="colsep rowsep" align="center"> </th>
<th valign="middle" class="colsep rowsep" align="center">
<span class="font-style-bold">Qty</span>
</th>
<th valign="middle" class="colsep rowsep" align="center">
<span class="font-style-bold">Unit</span>
</th>
<th valign="middle" class="colsep rowsep" align="center">
<span class="font-style-bold">Rate $</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="rowsep" align="left"> </td>
<td class="rowsep" align="left">
<div class="para">BUILT-UP WATERPROOF MEMBRANE PANEL ROOFING TO FLAT ROOFS AND POOL DECK</div>
</td>
<td class="rowsep" align="center"> </td>
<td class="rowsep" align="center"> </td>
<td class="rowsep" align="center"> </td>
<td class="rowsep" align="center"> </td>
</tr>
<tr>
<td class="rowsep" align="left"> </td>
<td class="rowsep" align="left">
<div class="para">Preparing surfaces: priming and applying “Grims K1” slurry and “Grims Premier K10” waterproof membrane system as specified</div>
</td>
<td class="rowsep" align="center"> </td>
<td class="rowsep" align="center"> </td>
<td class="rowsep" align="center"> </td>
<td class="rowsep" align="center"> </td>
</tr>
<tr>
<td class="rowsep" align="left"> </td>
<td class="rowsep" align="left">
<div class="para">Membrane collars; pointing with epoxy; reinforced with clamp rings around flanges of rainwater outlets</div>
</td>
<td class="rowsep" align="center"> </td>
<td class="rowsep" align="center"> </td>
<td class="rowsep" align="center"> </td>
<td class="rowsep" align="center"> </td>
</tr>
<tr>
<td class="rowsep" align="left">
<div class="para">A</div>
</td>
<td class="rowsep" align="center">
<div class="para">200mm diameter</div>
</td>
<td class="rowsep" align="center">
<div class="para">13</div>
</td>
<td class="rowsep" align="center">
<div class="para">No.</div>
</td>
<td class="rowsep" align="center">
<div class="para">34.28</div>
</td>
<td class="rowsep" align="center">
<div class="para">445.64</div>
</td>
</tr>
</tbody>
</table>
Thanks

Answer 1

table {
border-top: 1px Solid Black;
border-left: 1px Solid Black;
border-bottom: 1px Solid Black;
border-spacing: 0;
}
th, td {
border-right: 1px Solid Black;
}
th {
background-color: lightgrey;
border-bottom: 1px Solid Black;
}

Answer 2

You can use pseudo classes here:
As your table has th for table headers then you can try this:
table.topbotcol tr:first-of-type{
border-bottom:1px solid #ccc; // Will apply border to first row
}
table.topbotcol tr:first-of-type td{
border:none; // will not apply border to tds of first row, and continue after first row
}
You haven't provided detailed description, i think this might help you!
Pseudo-Classes
Docs
:first-of-type

Answer 3

What you need to do is set a border and set the table border to collapse. This will merge the cell borders. Then remove the unwanted top and bottom borders.
table, th, td{
border: 1px solid #000;
}
table {
border-collapse: collapse;
}
td {
border-bottom: none;
border-top: none;
}
Here's a JSFiddle with a fuller example as well as some more optimizations.
Link to JS Fiddle
Suggestions:
don't use valign or align on table cells, use CSS vertical-align and text-align instead
use paragraph tags instead of <div class="para">
use class names that are descriptive of the content, not its style. This helps with maintenance later when you decide that you do not want something to be font-style-bold anymore. It is easier to change <th> in the CSS than it is to change it in the CSS and THEN go back and change ALL font-style-bold to font-style-normal in your HTML.

Answer 4

You can achieve that by setting the border on the td and th cells, but making the border-top and border-bottom none for the td, but then setting surrounding border of the entire table as well.
The following css is an example:
table {
border-collapse:collapse;
border: 1px solid #000;
}
th {
background-color: #ccc;
border-left: 1px solid #000;
border-bottom: 1px solid #000;
padding: 5px;
}
td {
border-left: 1px solid #000;
padding: 5px;
}
Link to JS Fiddle

Answer 5

Try this
http://jsfiddle.net/aYCjA/
.tbl {
border: 1px solid black;
border-collapse: collapse;
min-width: 300px;
text-align: center;
}
.tbl th, .tbl td {
padding: 2px 5px;
}
.tbl td {
border-left: 1px solid black;
border-right: 1px solid black;
}
.tbl th {
border: 1px solid black;
}
The important thing here is border-collapse: collapse. This attribute prevents showing duplicate borders in sibling cells.