title: HTML merge cells
body: <p>as you can see my table has the cells all with individual borders.  I want them to be seamless vertial lines and horizaontal lineS...basically make the cell walls touch each other.  I asuume thats with the padding?</p>
  
  <p><img src="https://i.stack.imgur.com/31t4A.png" alt="enter image description here"></p>
  
  <pre><code>&lt;table align="center" class="data_extract vert_scroll_table" &gt;
      &lt;tr&gt;
          &lt;c:forEach var="heading" items="${results.headings}"&gt; 
              &lt;th class="data_extract"&gt;${heading}&lt;/th&gt;
          &lt;/c:forEach&gt;
      &lt;/tr&gt;
      &lt;c:forEach var="row" items="${results.data}"&gt;
          &lt;tr&gt;
              &lt;c:forEach var="cell" items="${row}" varStatus="rowStatus"&gt;
                  &lt;td class="data_extract"&gt;
                      &lt;c:choose&gt;
                          &lt;c:when test="${results.types[rowStatus.index].array}"&gt;
                              &lt;c:forEach var="elem" items="${cell}" varStatus="cellStatus"&gt;
                                  ${elem}&lt;c:if test="${!cellStatus.last}"&gt;,&amp;nbsp;&lt;/c:if&gt;
                              &lt;/c:forEach&gt;
                          &lt;/c:when&gt;
                          &lt;c:otherwise&gt;
                              ${cell}
                          &lt;/c:otherwise&gt;
                      &lt;/c:choose&gt;
                  &lt;/td&gt;
              &lt;/c:forEach&gt;
          &lt;/tr&gt;
      &lt;/c:forEach&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>table.data_extract {
      table-layout: fixed;
      border: 2px gray solid;
  }
  
  td.data_extract,
  th.data_extract,
  table.data_extract td,
  table.data_extract th {
      width: 125px;
      height: 75px;
      text-align: center;
      font-size: 7.5pt;
      white-space: normal;
      padding-left: 4px;
      padding-right: 4px;
  }
  </code></pre>