Adding A Responsive Table to A Help Center Template File

Overview

We are developing our customer facing help center instance, and my Knowledge Base Manager requested we add a table to the "submit a request"  form.  This can be done by inserting code in the Help Center's "new_request_page.hbs" template file.  

Problem

I called the default table css in the help center's style.css file by inserting <table class="table"> in the help center template file, as I thought it would be best to adhere to ZD style standards.  However, this led to a table with only horizontal borders (like the table in this ZD HC article on light agent permissions: https://support.zendesk.com/hc/en-us/articles/203662036-Understanding-and-setting-light-agent-permissions).  

Solution

Since we wanted a table with ALL borders (horizontal and vertical) and no shading, we decided to add css code directly to the new_request_template.hbs template file. 

You need to create your own css code and paste into the top of the new_request_template.hbs template file (and insert your table html to the page). Below is the css code we used for our simple table with 2 columns and 2 rows (including the header).   

NOTE

1. The code snippet below includes "responsive" code for small screens (starting at "@media"), so the table renders well on tablets/mobile phones.  In this code, I have removed our column header names and populated with a generic "YOUR HEADER 1" and "YOUR HEADER 2"   Be advised that this "responsive" code changes the table so that your column headers are on the left and the content on the right.
2. To ensure the table width matches the width of the ZD form fields, you want to add <div class="form"> before your table html.

CSS Code Snippet

<style type="text/css">
table {
  border-collapse: collapse;
  width: 650px; 
}

td,th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 10px; 
}

@media only screen and (max-width: 760px) {
  table, thead, tbody, th, td, tr {
  display: block;
  }

  table {
    border-collapse: collapse;
    width: 100%;
  }

  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  tr { border: 1px solid #ccc; }

  td {
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%;
  }

  td:before {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 45%;
    white-space: nowrap;
  }

  td:nth-of-type(1):before {
    content: "YOUR HEADER 1";
    font-weight:bold;
  }

  td:nth-of-type(2):before {
    content: "YOUR HEADER 2";
    font-weight:bold;
  }

}
</style>