Unable to style a table correctly using CSS

Question

I use Gatsby & Markdown for my blog.

MARKDOWN FOR THE TABLE

| Syntax    | Description |
| --------- | ----------- |
| Header    | Title       |
| Paragraph | Text        |

I have used the following CSS for styling the table rendered by the markdown above.

table {
  width: 80%;
  border-collapse: collapse;
  text-align: center;
  margin: auto;
}

th, td {
  border: .1rem solid #999;
  padding: .2em;

}

th {
  background-color: #555;
  color: white;
}

However, I am not getting the desired result. There are thick borders in the table as highlighted in orange in the picture below:

I want the thickness to be .1rem all around.

What am I doing wrong?

Checkout this question: https://stackoverflow.com/questions/12692089/preventing-double-borders-in-css — M.H Mighani, Jun 25 '22 at 06:32
Two things: A) Posting the markdown is quite pointless.We need to see the generated HTML. B) Using relative units like rem and em for thin lines is a bad idea. Computers can't display fractions of pixels, and rounding to full pixels will always result in unexact rendering. Use 1px for borders that you don't want to be thicker. — RoToRa, Jun 25 '22 at 07:59

score 0 · Answer 1 · answered Jun 25 '22 at 06:45

Try this, it should work

<!DOCTYPE html>
<html>
<style>
table {
  width: 80%;
  border-collapse: collapse;
  text-align: center;
  margin: auto;
}

table, th, td {
  border: .1rem solid #999;
  padding: .2em;

}

th {
  background-color: #555;
  color: white;
}
</style>
<body>

<table style="width:80%">
  <tr>
    <th>Syntax</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>Header</td>
    <td>Title</td>
  </tr>
  <tr>
    <td>Paragraph</td>
    <td>Text</td>
  </tr>
</table>


</body>
</html>

Unable to style a table correctly using CSS

1 Answers1