Newbie CSS Table Grid Lines Question

Hi,

My Table is not showing internal Gridlines for rows and Columns. Need some help on making them appear.

My CSS

table{
	background: lightgrey;
	border-style: solid;
	border-width: 1;
	border-color: black;
}

th{
	background: grey;
	font-weight: bold;
	padding: 5px;
}



td{
	padding: 5px;
}

td.code{
	font-family: courier, courier-new, serif;
	font-weight: bold;
}

Code (markup):

My HTML (Just the Table Code)

<table>
  <tr>
    <th>Property</th>
    <th>Purpose</th>
  </tr>
  <tr>
    <td class="code">font-family</td>
    <td>Specifies the font used.</td>
  </tr>
  <tr>
    <td class="code">font-size</td>
    <td>Specifies the size of the font used.</td>
  </tr>
  <tr>
    <td class="code">font-style</td>
    <td>Specifies whether the font should be normal, italic or oblique.</td>
  </tr>
  <tr>
    <td class="code">font-weight</td>
    <td>Specifies whether the font should be normal, bold, bolder, or lighter</td>
  </tr>
</table>

Code (markup):

I have attached the screenshot of how it looks on my Browser. You can see that the internal Grid Lines don't appear. What could be missing.

Thanks,
Hemanth

 

Hello.

Here is the solution:

CSS

table{
	background: lightgrey;
	border-style: solid;
	border-width: 1;
	border-color: black;
	border-collapse: collapse;
}

th{
	background: grey;
	font-weight: bold;
	padding: 5px;
	border-style: solid;
	border-width: 1;
	border-color: black;
}



td{
	padding: 5px;
	border-style: solid;
	border-width: 1;
	border-color: black;
}

td.code{
	font-family: courier, courier-new, serif;
	font-weight: bold;
}

Code (markup):

HTML

<table cellpadding="0" cellspacing="0">
  <tr>
    <th>Property</th>
    <th>Purpose</th>
  </tr>
  <tr>
    <td class="code">font-family</td>
    <td>Specifies the font used.</td>
  </tr>
  <tr>
    <td class="code">font-size</td>
    <td>Specifies the size of the font used.</td>
  </tr>
  <tr>
    <td class="code">font-style</td>
    <td>Specifies whether the font should be normal, italic or oblique.</td>
  </tr>
  <tr>
    <td class="code">font-weight</td>
    <td>Specifies whether the font should be normal, bold, bolder, or lighter</td>
  </tr>
</table>

Code (markup):

 

Thanks a lot. It worked well. It works on Internet Explorer but not on Chrome.

When I changed the border-width: 1; to border-width: 1px; for each of the selectors then it worked. Could you please tell me the reason?

Also Could you please also explain why the border-collapse: collapse; was used. I am new to this. When I removed it the Borders looked very wide.

 

I don't know what caused the issue on Chrome (to be honest I didn't check in other that FF as I was in a hurry )but I'm glad you solved it.

I usually always put px/em/% automatically so I never really encountered that problem.

Border-collapse is used to merge borders from each cell (<td></td>) in one. Without that your 1px border would be 2px wide as each cell would have own border.
This way we merged them in one.

Hope that helps.