Question

I have table layout, in which variable contents appears in it.
It looks fine when I’m looking with FireFox.
But with Safari, width get messed when content contains url in it.

Is there any possible way to fix this?

DEMO http://jsfiddle.net/wyMjQ/

With Safari, it messes up like this

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

It should be like this

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

Answer 1

Your width of 100px is way too small. Make it larger. Like 200px. Also try using white-space: nowrap; in your CSS.

table th {
    width: 200px;
    white-space:nowrap;
}