1

How can I enlarge a top-border of one cell? I've tried to set a bigger width to that cell. But it doesn't work.

I'm trying to enlarge the top-border cell which has tags_footer as a class. In fact, I'm trying also to make border width equal to the width of tags_forums + tags_description + tags_msgs

Here is code Fiddle : http://jsfiddle.net/pyXBk/

HTML :

<table>
    <tr>
        <td class="tags_forums">Forums</td>
        <td class="tags_description">Description</td>
        <td class="tags_msgs">msgs</td>
    </tr>
    <tr class="tags_body">
        <td>ABC</td>
        <td> DFG</td>
    </tr>
    <tr>
        <td class="tags_footer">Last msg</td>
    </tr>
</table>

CSS :

.tags_forums {
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
}

.tags_description {
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
}

.tags_msgs {
    border-bottom: 1px solid gray;
}

.tags_footer{
    border-top: 1px solid gray;
}

Thanks in advance.

1
  • So basically you want a bar at the bottom of your .tags_body.
    – Mr Meow
    Sep 10, 2013 at 21:57

1 Answer 1

1

The problem is in the HTML, not the CSS:

<td colspan="3" class="tags_footer">Last msg</td>

You need this table cell to span three columns, and that does it. The colspan attribute is what you need.

See demo at http://jsfiddle.net/audetwebdesign/pyXBk/2/

7
  • thank you, 6 minutes to become able to validate. Otherwise, how can I make smaller the tags_description cell, please ?
    – rzqr
    Sep 10, 2013 at 22:03
  • the .tags_description is already as small as it can get with a shrink-to-fit width (default value). If you want to make it smaller, you can set a with, for example, width: 3em and then force the word to wrap using word-break: break-all, see for example, jsfiddle.net/audetwebdesign/pyXBk/3 However, this is probably not what you want.
    – Marc Audet
    Sep 10, 2013 at 22:07
  • can you please explain me what the signification of em :p
    – rzqr
    Sep 10, 2013 at 22:13
  • em is a length unit used in CSS, equivalent to the width of an uppercase letter 'M'
    – Marc Audet
    Sep 10, 2013 at 22:14
  • Ok, thank you ! Look I've tried this using pixel width, but it doesn't work :jsfiddle.net/pyXBk/4
    – rzqr
    Sep 10, 2013 at 22:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.