title: safari browser showing table contents vertical but google chrome is showing horizontal . I want to safari to show table contents horizantal
body: <p>Want to show table contents(text / hyperlink/ div contents) horizontal in safari browser but dont know how to fix it as in google chrome table contents are absolutely showing fine as horizontal</p>
  
  <pre><code>enter code here
  &lt;div class="itemFields"&gt;
          &lt;table&gt;
            &lt;tbody&gt;&lt;tr&gt;
              &lt;td class="label" dir="ltr"&gt;Call Number&lt;/td&gt;
              &lt;td&gt;&lt;div&gt;&lt;a href="./query?match_1=PHRASE&amp;amp;field_1=call_number&amp;amp;term_1=PS169.F7+H3+1961&amp;amp;theme=system" dir="ltr"&gt;PS169.F7 H3 1961&lt;/a&gt;&lt;/div&gt;&lt;/td&gt;
            &lt;/tr&gt;&lt;tr&gt;
              &lt;td class="label" dir="ltr"&gt;Publisher&lt;/td&gt;
              &lt;td&gt;&lt;div&gt;&lt;span dir="ltr"&gt;F. Ungar Pub. Co.&lt;/span&gt;&lt;/div&gt;&lt;/td&gt;
            &lt;/tr&gt;&lt;tr&gt;
              &lt;td class="label" dir="ltr"&gt;Year&lt;/td&gt;
              &lt;td&gt;&lt;div&gt;&lt;span dir="ltr"&gt;1961&lt;/span&gt;&lt;/div&gt;&lt;/td&gt;
            &lt;/tr&gt;
  
          &lt;/tbody&gt;&lt;/table&gt;
        &lt;/div&gt;
  
  
  
  
  div.itemFields {
  margin: 0;
  margin-right: 15em;
  }
  
  .itemFields table tr td {
  vertical-align: top;
  }
  
  .itemFields table tr td {
  padding: 0;
  }
  
  .itemFields table tr td.label {
  padding-right: 1em;
  font-weight: bold;
  white-space: nowrap;
  }
  
  .itemFields table tr td div {
  display: table;
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  word-wrap: break-word;
  }
  
  .itemFields table tr td div a,
  .itemFields table tr td div span {
  display: inline;
  }
  </code></pre>
  
  <p>this itemFields class content is showing contents of it vertical in safari browser</p>