JSFiddle - React, Tailwind, and code Playground

HTML

<table class="views-table cols-3">
      <caption>Ocak</caption>
        <thead>
      <tr>
                  <th class="views-field views-field-field-ilk-tarih">
            İlk Tarih          </th>
                  <th class="views-field views-field-field-son-tarih">
            Son Tarih          </th>
                  <th class="views-field views-field-field-ayrinti">
            Ayrıntı          </th>
              </tr>
    </thead>
    <tbody>
          <tr class="odd malitakvim views-row-first">
                  <td class="views-field views-field-field-ilk-tarih">
            <div><span content="2012-06-01T00:00:00+03:00" datatype="xsd:dateTime" property="dc:date" class="date-display-single">01.06.2012</span></div>          </td>
                  <td class="views-field views-field-field-son-tarih">
            <span content="2012-09-01T00:00:00+03:00" datatype="xsd:dateTime" property="dc:date" class="date-display-single">01.09.2012</span>          </td>
                  <td class="views-field views-field-field-ayrinti">
            <p>01.1Yıllık Gelir Vergisi Beyannamelerinde, Toplam Gelir İçindeki Zirai Kazançları %75 ve Daha Yüksek Oranda Olanlar İçin 2. Taksit Ödemesi2.2011</p>
          </td>
              </tr>
          <tr class="even malitakvim views-row-last">
                  <td class="views-field views-field-field-ilk-tarih">
            <div><span content="2012-06-29T00:00:00+03:00" datatype="xsd:dateTime" property="dc:date" class="date-display-single">29.06.2012</span></div>          </td>
                  <td class="views-field views-field-field-son-tarih">
            <span content="2013-06-09T00:00:00+03:00" datatype="xsd:dateTime" property="dc:date" class="date-display-single">09.06.2013</span>          </td>
                  <td class="views-field views-field-field-ayrinti">
            <p>2012 Yılında Kullanılacak Olan Yasal Defterlere İlişkin Açılış Tasdiki</p>
          </td>
              </tr>
      </tbody>
</table>

CSS

caption {
    font-size:24px;
    font-weight:bold;
    color:#003366;
    margin-right:89%;
    margin-bottom: 10px;
    background: url("../img/ok.png") right no-repeat;
    width:570px;
    text-align:left;
    cursor: pointer;
}

thead {
  background-color: #fff;
  color: #333333;
  font-weight: bold;
  font-size:14px;
  border: none;
}

tr.malitakvim {
    background-color: #fff;
    color: #333333;
    font-size:14px;
    border: none;
    border-bottom: 1px dashed #e5e5e5;
}

tbody {
border-top: none;
}

th.views-field-field-ayrinti {
    padding-left:85px;
    padding-top:20px;
}

th.views-field-field-son-tarih {
    padding-left:70px;
    width:64px;
}

td.views-field-field-son-tarih {
    padding-left:70px;
}

.views-field-field-ayrinti {
    padding-left:85px;
}

.views-field-field-ayrinti p {
    margin-bottom: 10px;
}

JavaScript

jQuery(document).ready(function(){
    $('caption').click(function() {
        $(this).nextAll().toggle('slow');
        return false;
    });
});