title: CSS element shows on the webpage
body: <p>I have simple responsive table , it works fine, but on the webpage, CSS code show </p>
  
  <pre><code>
  &lt;style&gt;
    table {
      border-collapse: collapse;
      border-spacing: 0;
      width: 100%;
      border: 1px solid #ddd;
    }
  
    th, td {
      text-align: left;
      padding: 8px;
    }
  
    tr:nth-child(even){background-color: #f2f2f2}
  &lt;/style&gt;
  
  &lt;div style="overflow-x:auto;"&gt;
    &lt;table&gt;
      &lt;tr&gt;
        &lt;th&gt;First Name&lt;/th&gt;
        &lt;th&gt;Last Name&lt;/th&gt;
        &lt;th&gt;Country&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Smith&lt;/td&gt;
        &lt;td&gt;John&lt;/td&gt;
        &lt;td&gt;Slovenia&lt;/td&gt; &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  
  </code></pre>
  
  <p>Online <code>CSS border collapse</code> shown on the webpage</p>
  
  <p>is there any reason? Thanks Mahmoud</p>