CODEWITHSUNDEEP
htmlcssborder
johnn
johnn

Reputation: 317

how to make a space-keeping column use css and table tag

What is the most elegant way to remove the up down border?

table {
  border: 1px solid #CCC;
  border-collapse: collapse;
  text-align: center;
}
.noborder {
  border: none;
  width: 50px;
}
<br>
<table border='1' width='500'>
  <tr>
    <th>Product</th>
    <th>Description</th>
    <th>Price</th>
    <th>Quantity</th>
    <th class="noborder">&nbsp;</th>
    <th>Delete</th>
  </tr>
  <tr>
    <td>AA</td>
    <td>BB</td>
    <td>CC</td>
    <td>DD</td>
    <td class="noborder">&nbsp;</td>
    <td>FF</td>
  </tr>
</table>

enter image description here

JSfiddle Demo

Upvotes: 1

Views: 55

Answers (2)

johnchinjew
johnchinjew

Reputation: 150

I'd say specify only the borders you need. If you don't want the top and bottom... only set the left and right border.

table {
  border-left: 1px solid #000;
  border-left: 1px solid #000;
}

If you're trying to remove only the top and bottom of that blank column, you could try setting the border for each column separately, thus allowing the removal of the desired border.

td {
  border: 1px solid #000;
}
#blank-td {
  border: none /* or even 1px solid #fff */;
}

Just mess around with it More info: http://www.w3schools.com/css/css_border.asp

Upvotes: 0

m4n0
m4n0

Reputation: 32275

You need to apply border for the th and td elements and not for the entire table. Setting border for the table will not be affected by the noborder class applied on the child elements.

Updated JSfiddle

table {
  border-collapse: collapse;
  text-align: center;
}
.noborder {
  border: none;
  width: 50px;
}
th,
td {
  border: 1px solid #CCC;
}
<br>
<table width='500'>
  <tr>
    <th>Product</th>
    <th>Description</th>
    <th>Price</th>
    <th>Quantity</th>
    <th class="noborder">&nbsp;</th>
    <th>Delete</th>
  </tr>
  <tr>
    <td>AA</td>
    <td>BB</td>
    <td>CC</td>
    <td>DD</td>
    <td class="noborder">&nbsp;</td>
    <td>FF</td>
  </tr>
</table>

Upvotes: 4

Related Questions