1

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>
Improve this question

2 Answers 2

Reset to default
5

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; }
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

Try

.withBorder { border: 1px solid black; }

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

Improve this answer

1 Comment

Perfect - just the ticket.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.