html - 调整表格单元格以适合文本

Question

如何使表格单元格与其中的文本一样小？我也尝试设置边距、填充和空白，但它们都不起作用:

HTML

<table class='header_left'>
    <tr>
        <td><a href='/index.php' class='title1'>somewebsite.com</a></td>
    </tr>
    <tr>
        <td class='vonal'><a href='/index.php' class='title2'>Check something and do it faster than your competitors</a></td>
    </tr>
</table>

CSS

table.header_left {
    float:left;
    text-align:left;
    margin:0;
    padding:0;
    border-collapse: collapse;
}

table.header_left a.title1 {
    color: #e6e8ea;
    font-size: 39px;
    text-decoration:none;
    margin:0;
    padding:0;
}
table.header_left a.title2 {
    color: #c1c2c4;
    font-size: 14px;
    text-decoration:none;
    margin:0;
}
table.header_left td.vonal {
    border-bottom:1px solid #c1c2c4;
    text-decoration:none;
}
table.header_left td {
    border:1px solid;
    white-space: nowrap;
    padding:0;
    margin:0;
}

http://jsfiddle.net/RZHPD/

如您所见，文本“somewebsite.com”周围有填充。我希望将其删除。

谢谢

Answer 1

这是因为文本/字体的默认填充。你可以尝试在你的 css 中添加:

table.header_left a.title1 { 
   line-height:15px; 
   float: left;
}