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

时间:2013-12-18 09:04:55

标签: html css

如何使表格单元格与文本内部的文本一样小?我也尝试设置边距,填充和空白区域,但它们都不起作用:

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”周围有填充。我希望将其删除。

由于

1 个答案:

答案 0 :(得分:2)

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

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