Width of Dates are not the same because width of number 1 and 2 are different?

Question

I am working on a react project, and I list some operations ( objects ) in a Table, everything looks fine but the client for something I found very weird and hard, here is how it looks :

But that is not how he wanted the datatable dates looks, he wants something like this :

Is there a CSS property that can make that possible ?

Any help would be much appreciated.

there is too much code to write, but those parts are enough :

HTML :

<div class="co-operations-contrat__date">
    <span class="co-operations-contrat__date-text">04/07/2018</span>
</div>

SASS :

.co-operations-contrat {
   &__date {
    a {
        margin-right: 5px;
        display: inline-block;
        cursor: pointer;
        +.co-operations-contrat__date-text {
            margin-left: 0;
        }
    }
    &-text {
        margin-left: 25px;

        font-family: "Poppins", monospace;
    }
   }
  }

are you able to simply use a mono-spaced font for those dates? — blurfus, Mar 01 '19 at 16:28
are you able to actually add the code? Seeing how its structured would be helpful. — Mark, Mar 01 '19 at 16:32
Consider using a monospace font for the dates. https://www.cssfontstack.com/monospace — Miroslav Glamuzina, Mar 01 '19 at 16:48
Possible duplicate of: https://stackoverflow.com/questions/10149330/force-non-monospace-font-into-fixed-width-using-css — jpenna, Mar 01 '19 at 16:50
check [this](https://stackoverflow.com/questions/10149330/force-non-monospace-font-into-fixed-width-using-css) and [this](https://stackoverflow.com/questions/14177368/is-there-a-way-to-make-a-variable-width-font-act-like-a-fixed-width-font-in-html)... — kukkuz, Mar 01 '19 at 17:14

Mark · Answer 1 · 2019-03-01T17:08:57.553

Like others have said monospace for the dates would be best. If you can't change the font are you able to wrap each part of the date? If so what you could do is something like this;

https://jsfiddle.net/8mLwot25/3/

Basically, I've set a width on each span and aligned them with flex on the parent container. (You could also float each span). But by doing this would align the items in a better way.

It's not perfect but its a solution.

.container {
  display: flex;
}

.container span {
  text-align: center;
  width: 20px;
}

.container span:last-child {
  width: auto;
}

<div class="container">
  <span>01</span>/
  <span>04</span>/
  <span>2019</span>
</div>
<div class="container">
  <span>01</span>/
  <span>05</span>/
  <span>2018</span>
</div>
<div class="container">
  <span>13</span>/
  <span>04</span>/
  <span>2019</span>
</div>

score 1 · Answer 2 · answered Mar 01 '19 at 16:34

1

Maybe letter-spacing can help you with that. I'm not sure if you can achieve a pixel perfect result with that but this property may be usefull.

answered Mar 01 '19 at 16:34

Ludovic Mahe

11
2

I thought of that, but I will have to treat each case alone, it is hard work, I will have to treat case where my date contains 3 or 4 numbers 1 like " 11/11/2011" and "12/11/2011" .. letter spacing does not solve the problem. – TaouBen Mar 01 '19 at 16:38

blurfus · Answer 3 · 2019-03-01T18:15:27.563

The issue is related to the Poppins font you are using for these dates. The font is not monospaced (it is sans-serif only).

If using a regular monospace font, the issue no longer appears

See demo below

.co-operations-contrat__date a {
  margin-right: 5px;
  display: inline-block;
  cursor: pointer;
}

.co-operations-contrat__date .co-operations-contrat__date-text {
  margin-left: 0;
}

.co-operations-contrat__date-text {
  margin-left: 25px;
  font-family: "Poppins", monospace;
}

#no-poppins .co-operations-contrat__date-text {
  margin-left: 25px;
  font-family: monospace;
}

<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">

<h2>Poppins In</h2>
<div class="co-operations-contrat__date">
  <span class="co-operations-contrat__date-text">30/06/2018</span><br/>
  <span class="co-operations-contrat__date-text">31/03/2018</span><br/>
  <span class="co-operations-contrat__date-text">04/07/2018</span><br/>
  <span class="co-operations-contrat__date-text">31/01/2011</span><br/>
</div>

<h2>Poppins Out</h2>
<div id="no-poppins" class="co-operations-contrat__date">
  <span class="co-operations-contrat__date-text">30/06/2018</span><br/>
  <span class="co-operations-contrat__date-text">31/03/2018</span><br/>
  <span class="co-operations-contrat__date-text">04/07/2018</span><br/>
  <span class="co-operations-contrat__date-text">31/01/2011</span><br/>
</div>

<h1>Other workarounds include </h1>

<h2>Usign &lt;TT&gt;</h2>
<div class="co-operations-contrat__date">
  <tt>30/06/2018</tt><br/>
  <tt>31/03/2018</tt><br/>
  <tt>04/07/2018</tt><br/>
  <tt>31/01/2011</tt><br/>
</div>

<h2>Using &lt;PRE&gt;</h2>
<div class="co-operations-contrat__date">
  <span>30/06/2018</pre>
  <pre>31/03/2018</pre>
  <pre>04/07/2018</pre>
  <pre>31/01/2011</pre>
</div>

Of course, you can choose any monospaced font of your choosing, I just went the browser's defaults for the demo.

@TaouBen for all dates? then there is no answer, per se. Only workarounds or hacks... can you find a similar font but monospaced? — blurfus, Mar 01 '19 at 17:45

Width of Dates are not the same because width of number 1 and 2 are different?

3 Answers3