調整表格的大小以適應文字

如何讓表格單元與其中的文字一樣小？我試圖設置的margin，padding和白色的空間爲好，但他們沒有工作：調整表格的大小以適應文字

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」有填充。我希望它被刪除。

謝謝

來源

2013-12-18 erdomester

'填充文本「somewebsite.com」' - 我不能在你的小提琴看到文本？ – SW4

那裏沒有填充。您在「somewebsite.com」後面看到一個空格，因爲它下面的列具有較長的文本並且表格單元格會展開以適合其內容。你可以做的事情： 1）不使「somewebsite.com」的一部分 2）中心對齊「somewebsite.com」，使其看起來更好。 – Pratik

對不起，鏈接固定。 – erdomester

這是由於文本/字體的默認填充。你可以嘗試加入你的css：

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

來源

2013-12-18 09:28:39 Era

@erdomaster - 這將解決您的問題。感謝時代的解決方案:) – Pratik

關鍵是文本的默認填充。我不想改變線條高度，但現在我發現它是必要的。謝謝 – erdomester

調整表格的大小以適應文字

回答

相關問題