CODEWITHSUNDEEP
htmlcssfullcalendar
Dimitri Danilov
Dimitri Danilov

Reputation: 1352

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.

Upvotes: 0

Views: 110

Answers (2)

Keith
Keith

Reputation: 4137

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;
}

Upvotes: 1

Vincent
Vincent

Reputation: 167

You should use 3 seperate divs, that use margin-left and margin right.

Upvotes: 0

Related Questions