0

This is my Table cell. It is as wide as the content it contains:

<td class="sticky calltd employeetd" style="width: fit-content;">
    Wintheiser Granville
</td>

Is there a way to set the width of the inner-part of my container 10px longer than "fit-content" like:

width: calc(fit-content + 10px); <---- doesn't work

I didn't find an equal question, but if there is one, please link it here.

Width:fit-content;

enter image description here

What i need:

enter image description here

The blue Area needs to be a content space no margin or padding

Jere
  • 1,196
  • 1
  • 9
  • 31
Elias
  • 125
  • 2
  • 22
  • 2
    Try adding `padding-right: 10px`? That would work if you don't want text in the area. – Anvay Jul 22 '21 at 08:44
  • Thats not a solution for my problem, i have text inside my cell and padding doesnt add content space – Elias Jul 22 '21 at 08:46
  • I don't think you can do this without js. I'll try something out. – Anvay Jul 22 '21 at 08:47
  • Maybe you can try using ::after and setting it to `content: " "` and `width: 10px`? I'm not sure if that would work but you can give it a try. Here is the link: https://stackoverflow.com/a/18159552/10464375 – Anvay Jul 22 '21 at 08:52
  • Wait that won't help you because you can't add text in it. – Anvay Jul 22 '21 at 08:54
  • does **this** work : `width: calc(fit-content() + 10px)` – St3an Jul 22 '21 at 09:00
  • @St3an Unfortunately not – Elias Jul 22 '21 at 09:05
  • Could you add an image of the expected result? – mahan Jul 22 '21 at 09:09
  • Actually never used it, but it seems to apply on grid layout, as per [documentation for this function on MDN site](https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content()). Could you provide us with more code, or create snippet ? – St3an Jul 22 '21 at 09:11
  • 1
    You may not use tables for layout. – mahan Jul 22 '21 at 09:22
  • 1
    and why it should not be a padding? in all the cases it's an extra width so padding will do the job perfectly – Temani Afif Jul 22 '21 at 09:26
  • because i have a :hover effect on it, which size the text up. and you know the padding is no content space – Elias Jul 22 '21 at 09:28
  • 2
    @Elias such information should belong to the question and using padding won't prevent your hover effect. Better make your question complete and clear of what you want achieve if you want to get accurate answers, don't give use only 10% of the question – Temani Afif Jul 22 '21 at 09:33
  • @TemaniAfif Yes i know but the content space fits the conent that means if :hover and the content size up, the content is longer and DOESNT FITS THE CONTENT ANYMORE – Elias Jul 22 '21 at 09:38
  • 1
    don't tell this to me, make your question more clear. We should not have a discussion to explain to *me* what you want. Edit your question to include all the information so everyone get a clear non-ambiguous idea of what you want otherwise no one can answer your question – Temani Afif Jul 22 '21 at 09:40
  • This information isnt important to answer this question, my question was just "is it possible to do this with CSS " if not my question is answered, if it is possible and how my question is answered too" if i add this information, user just think they must give me other solutions about my approach which i dont want/need – Elias Jul 22 '21 at 09:46
  • 1
    I have a ton of answers (and there is a ton of answers) but I won't waste my time to provide one and then you will later tell me "no, this one is not good because in the future I will be doing X and it won't be good" .. good luck getting your answer – Temani Afif Jul 22 '21 at 09:49

2 Answers2

3

It will not win any beauty contests, but here is a solution that at least gets you where I understand you want to go:

<td class="sticky calltd employeetd" style="width: fit-content;">
    Sheldon Cooper
    <div style="width: 10px; height: 0px; display: inline-block;"></div>
</td>

That way you just add a div container with zero height (meaning it is invisible) and your preferred width next to the content of your td.

In case your fit-content property is calculated based on the length of the td's content, this will expand your width for 10px. In case your fit-content is calculated based on something else, this doesn't help you.

Jere
  • 1,196
  • 1
  • 9
  • 31
-5

A small research led me here

Gordon's answer mentions the following:

CSS isn't a 'programming language'. You can't really make decisions, gather data, or manipulate anything the language wasn't designed to do. If you want to do that, javascript is your best choice

I'd also suggest JS for this, but im sure you thought of it.

In addition, notice the following:

If you're comfortable with jQuery, you can just use $("#postanad").width().

shamgar
  • 120
  • 9