1

可変コンテンツが表示されるテーブルレイアウトがあります。
FireFoxで見ていると綺麗に見えます。
しかし、Safari では、コンテンツに URL が含まれていると幅が乱れます。

これを修正する方法はありますか？

デモhttp://jsfiddle.net/wyMjQ/

Safariでは、このようにめちゃくちゃになります

_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
age     18
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
gen     male
der     
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
bod     http://www.youtube.com/wa
y       tch?v=dA8O32jE
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
tag     tag1 tag2 tag3
s

このようになるはずです

_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
age      18
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
gender   male
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
body     http://www.youtube.com/wa
         tch?v=dA8O32jE
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
tags     tag1 tag2 tag3

HTML

  <div class="introduction">
  <table>
    <tr>
      <th>age</th>
      <td class="border">18</td>
    </tr>
    <tr>
      <th>gender</th>
      <td class="border">male</td>
    </tr>
    <tr>
      <th class="body">body</th>
      <td>http://www.youtube.com/watch?v=dA8O32jE</td>
    </tr>
    <tr>
      <th class="tag">tags</th>
      <td class="border">
      </td>
    </tr>
  </table>            
  </div>

CSS

div.introduction{
    text-align:left;
    margin:5px 8px;
    overflow: hidden;
    padding-top: 10px;
    padding-bottom: 5px;
    padding-left: 0px;
    padding-right: 5px;
    border-spacing: 0px;
}

table th {
    width: 100px;
    padding-left: 9px;
    color: rgb(0, 0, 0);
    font-size: 83.3%;
    letter-spacing: 2px;
    vertical-align:top;
    border-top: 1px dashed rgb(191, 191, 186);
    border-bottom: 1px dashed rgb(191, 191, 186);
}

table th.body {
    height: 80px;
}

table th.tag {
    height: 80px;
}

table td {
    width: 140px;
    padding-left: 9px;
    font-size: 83.3%;
    letter-spacing: 2px;
    vertical-align:top;
}

td.border{
    border-top: 1px dashed rgb(191, 191, 186);
    border-bottom: 1px dashed rgb(191, 191, 186);
}
4

1 に答える 1

4

あなたの幅100pxは小さすぎます。大きくしてください。のように200px。また、空白を使用してみてください: nowrap; あなたのCSSで。

table th {
    width: 200px;
    white-space:nowrap;
}
于 2013-01-21T23:32:39.587 に答える