CODEWITHSUNDEEP
htmlcss
erdomester
erdomester

Reputation: 11839

Resize table-cell to fit text

How can I make the table-cell as small as the text inside it? I tried to set margin, padding and white-space as well, but none of them works:

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/

As you see, there is padding around the text "somewebsite.com". I want it to be removed.

Thanks

Upvotes: 0

Views: 641

Answers (1)

Richa
Richa

Reputation: 4270

This is because of the default padding of text/ font. you can try adding in your css :

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

Upvotes: 2

Related Questions