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 回答