css - safari 浏览器显示表格内容垂直但谷歌浏览器显示水平。我想在 safari 中水平显示表格内容

Question

想在 safari 浏览器中水平显示表格内容(文本/超链接/div 内容)但不知道如何修复它，因为在 google chrome 中表格内容绝对可以水平显示

enter code here
<div class="itemFields">
        <table>
          <tbody><tr>
            <td class="label" dir="ltr">Call Number</td>
            <td><div><a href="./query?match_1=PHRASE&amp;field_1=call_number&amp;term_1=PS169.F7+H3+1961&amp;theme=system" dir="ltr">PS169.F7 H3 1961</a></div></td>
          </tr><tr>
            <td class="label" dir="ltr">Publisher</td>
            <td><div><span dir="ltr">F. Ungar Pub. Co.</span></div></td>
          </tr><tr>
            <td class="label" dir="ltr">Year</td>
            <td><div><span dir="ltr">1961</span></div></td>
          </tr>

        </tbody></table>
      </div>




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;
}

这个 itemFields 类内容在 safari 浏览器中垂直显示它的内容

Answer 1

试试这个代码!如果您使用 Bootstrap ，您还必须更好地需要重置代码......此代码只是简单的 HTML5 表格 格式和样式。您可以更改表格宽度 960px 及更多…………

<div class="itemFields">
  <table width="960px" align="center" border="1">
    <tbody>
      <tr>
        <td class="label" dir="ltr">Call Number</td>
        <td>
          <div><a href="./query?match_1=PHRASE&amp;field_1=call_number&amp;term_1=PS169.F7+H3+1961&amp;theme=system" dir="ltr">PS169.F7 H3 1961</a></div>
        </td>
      </tr>
      <tr>
        <td class="label" dir="ltr">Publisher</td>
        <td>
          <div><span dir="ltr">F. Ungar Pub. Co.</span></div>
        </td>
      </tr>
      <tr>
        <td class="label" dir="ltr">Year</td>
        <td>
          <div><span dir="ltr">1961</span></div>
        </td>
      </tr>

    </tbody>
  </table>
</div>