CODEWITHSUNDEEP
htmlcsshtml-table
RGriffiths
RGriffiths

Reputation: 5970

Problems putting a border on a HTML table

I am trying to achieve this effect:

enter image description here

I have tried the following but it does not work at all (no borders appear at all). Can anyone explain how to achieve what I would like.

<style type="text/css">
  .withBorder {
    border: 1px;
  }

  .withoutBorder {
    border: 0px;
  }
</style>

<table>
  <tr>
    <td class = 'withoutBorder'> cell1 </td>
    <td class = 'withBorder'> cell2 </td>
    <td class = 'withoutBorder'> cell3 </td>
  </tr>

  <tr>
    <td class = 'withBorder'> cell1 </td>
    <td class = 'withoutBorder'> cell2 </td>
    <td class = 'withBorder'> cell3 </td>
  </tr>
</table>

Upvotes: 1

Views: 38

Answers (2)

aaronburrows
aaronburrows

Reputation: 1020

You need border-collapse on the table, like so: 

table {
    border-collapse: collapse;
}
.withBorder {
    border: 1px solid #000;
}
.withoutBorder {
    border: none;
}

Attached a Fiddle.

Also, you can make your code more concise by using nth-child selectors. You don't need to explicitly set class names on each table cell. This solution works if you add rows or columns to your table too. See updated Fiddle.

table {
    border-collapse: collapse;
}
tr:nth-child(2n+1) td:nth-child(2n+2),
tr:nth-child(2n+2) td:nth-child(2n+1) {
    border: 1px solid #000;
}

Upvotes: 5

ilter
ilter

Reputation: 4079

Try

.withBorder {
    border: 1px solid black;
}

You should have defined type and color after size of the border.

Upvotes: 1

Related Questions