如何减小区域的宽度？

Question

目前我有这个：

我想要将3个元素分隔成这样的东西：

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

我试图减少fc-day-header类的宽度，但没有改变任何内容。

我对css非常不好，所以我不知道该怎么做。

有个主意吗？

编辑：html结构：

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

html和css不是我的，它们是由完整日历生成的。

我只能通过javascript修改它们。

Answer 1

您可以使用border-spacing属性来区分每个单元格。

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

Answer 2

您应该使用3个单独的div，使用margin-left和margin right。