Why are the colours of the table cells overlapping in my CSS table?

I am using CSS in a .RMD file for R and am outputting a HTML file which produces tables.

I am then converting the HTML file to PDF.

The following image is the issue I am facing, the colours of the cells are overlapping:

The following is the intermediate code from the HTML page source:

<html>

<head>

<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta http-equiv="X-UA-Compatible" content="IE=EDGE" />

<title>Title of File</title>

<style type="text/css">code{white-space: pre;}</style>
<style type="text/css">
  pre:not([class]) {
    background-color: white;
  }
</style>
<script type="text/javascript">
if (window.hljs) {
  hljs.configure({languages: []});
  hljs.initHighlightingOnLoad();
  if (document.readyState && document.readyState === "complete") {
    window.setTimeout(function() { hljs.initHighlighting(); }, 0);
  }
}
</script>



<style type="text/css">
h1 {
  font-size: 34px;
}
h1.title {
  font-size: 38px;
}
h2 {
  font-size: 30px;
}
h3 {
  font-size: 24px;
}
h4 {
  font-size: 18px;
}
h5 {
  font-size: 16px;
}
h6 {
  font-size: 12px;
}
.table th:not([align]) {
  text-align: left;
}
</style>




<style type="text/css">
.main-container {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
}
code {
  color: inherit;
  background-color: rgba(0, 0, 0, 0.04);
}
img {
  max-width:100%;
}
.tabbed-pane {
  padding-top: 12px;
}
.html-widget {
  margin-bottom: 20px;
}
button.code-folding-btn:focus {
  outline: none;
}
summary {
  display: list-item;
}
</style>



<!-- tabsets -->

<style type="text/css">
.tabset-dropdown > .nav-tabs {
  display: inline-table;
  max-height: 500px;
  min-height: 44px;
  overflow-y: auto;
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.tabset-dropdown > .nav-tabs > li.active:before {
  content: "";
  font-family: 'Glyphicons Halflings';
  display: inline-block;
  padding: 10px;
  border-right: 1px solid #ddd;
}

.tabset-dropdown > .nav-tabs.nav-tabs-open > li.active:before {
  content: "";
  border: none;
}

.tabset-dropdown > .nav-tabs.nav-tabs-open:before {
  content: "";
  font-family: 'Glyphicons Halflings';
  display: inline-block;
  padding: 10px;
  border-right: 1px solid #ddd;
}

.tabset-dropdown > .nav-tabs > li.active {
  display: block;
}

.tabset-dropdown > .nav-tabs > li > a,
.tabset-dropdown > .nav-tabs > li > a:focus,
.tabset-dropdown > .nav-tabs > li > a:hover {
  border: none;
  display: inline-block;
  border-radius: 4px;
  background-color: transparent;
}

.tabset-dropdown > .nav-tabs.nav-tabs-open > li {
  display: block;
  float: none;
}

.tabset-dropdown > .nav-tabs > li {
  display: none;
}
</style>

<!-- code folding -->




</head>

<body>


<div class="container-fluid main-container">




<div class="fluid-row" id="header">



<h1 class="title toc-ignore">Title of File</h1>
<h3 class="subtitle"><div style="white-space: pre-line;"><strong>Test Output</strong>

2019/20</div></h3>

</div>


<style type="text/css">

@media screen {
body{ /* Normal  */
      font-size: 15px;
      font-family: "Arial", Helvetica, sans-serif;
  }
table, td {  /* Table  */
  font-size: 13px;
  font-family: "Arial", Helvetica, sans-serif;
  table-layout: fixed;
  width: 100%;
}
h1.title {
  font-size: 38px;
  color: #0070c0;
  top: 25px;
  font-family: "Arial", Helvetica, sans-serif;
}
h1 { /* Header 1 */
  font-size: 28px;
  color: #558ee7;
  font-family: "Arial", Helvetica, sans-serif;
}
h2 { /* Header 2 */
  font-size: 22px;
  color: #0070c0;
  font-family: "Arial", Helvetica, sans-serif;
}
h3 { /* Header 3 */
  font-size: 18px;
  color: #0070c0;
  font-family: "Arial", Helvetica, sans-serif;
}
h4 { /* Quality Statement */
  font-size: 28px;
  color: #558ee7;
  font-family: "Arial", Helvetica, sans-serif;
}
h5 { /* subtitle */
  font-size: 13px;
  color: #0070c0;
  font-family: "Arial", Helvetica, sans-serif;
}
.main-container {
  max-width: 100% !important;
}
}
@media print {
body{
  -webkit-print-color-adjust: exact;
}
}

<script>

// add bootstrap table styles to pandoc tables
function bootstrapStylePandocTables() {
  $('tr.header').parent('thead').parent('table').addClass('table table-condensed');
}
$(document).ready(function () {
  bootstrapStylePandocTables();
});


</script>

<!-- tabsets -->

<script>
$(document).ready(function () {
  window.buildTabsets("TOC");
});

$(document).ready(function () {
  $('.tabset-dropdown > .nav-tabs > li').click(function () {
    $(this).parent().toggleClass('nav-tabs-open')
  });
});
</script>

<!-- code folding -->


<!-- dynamically load mathjax for compatibility with self-contained -->
<script>
  (function () {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src  = "https://mathjax.rstudio.com/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML";
    document.getElementsByTagName("head")[0].appendChild(script);
  })();
</script>

</body>
</html>

I am unsure which part of the code I should be amending to prevent this from occurring? Also, it would be great if the output could be in landscape too.