Dimitri Danilov Dimitri Danilov - 2 months ago 9
CSS Question

How can I reduce the width of an area?

At the moment I have this :

enter image description here

And I want to delimit the 3 elements to have something like this :

enter image description here

<th class="fc-day-header fc-widget-header fc-sat" data-date="2016-10-01">JOUR 1<br>samedi 1 octobre</th>


I tried to reduce the width of the fc-day-header class but that changed nothing.

I am very bad at css so I don't know what to do.

Have an idea ?

EDIT: html structure:

<table>
<thead>
<tr>
<th class="fc-axis fc-widget-header" style="width:18px"></th><th class="fc-day-header fc-widget-header fc-sat" data-date="2016-10-01" style="width:70%;">JOUR 1<br>samedi 1 octobre</th>
<th class="fc-day-header fc-widget-header fc-sun" data-date="2016-10-02">JOUR 2<br>dimanche 2 octobre</th>
<th class="fc-day-header fc-widget-header fc-mon" data-date="2016-10-03">JOUR 3<br>lundi 3 octobre</th>
</tr>
</thead>
</table>


The html and the css are not mine, they are generated by full calendar.

I can modify them only by javascript.

Answer

You can use the border-spacing property to space out each cell.

https://jsfiddle.net/3xe5mzmx/

<table>
  <thead>
    <tr>
      <th class="fc-axis fc-widget-header" style="width:18px"></th>
      <th class="fc-day-header fc-widget-header fc-sat" data-date="2016-10-01">JOUR 1<br>samedi 1 octobre</th>
      <th class="fc-day-header fc-widget-header fc-sun" data-date="2016-10-02">JOUR 2<br>dimanche 2 octobre</th>
      <th class="fc-day-header fc-widget-header fc-mon" data-date="2016-10-03">JOUR 3<br>lundi 3 octobre</th>
    </tr>
  </thead>
</table>

table {
  width: 100%;
  border-spacing: 15px 10px;
  border-collapse: separate;
}
th {
  border: 1px solid black;
}
Comments