1

I want to change the display of the FooTable.

At the moment my FooTable looks like this enter image description here

produced from this code:

<table class="table">
    <thead>
        <tr>
            <th>First Name</th>
            <th data-breakpoints="all" data-type="html" >Picture</th>
            <th data-breakpoints="all">Date</th>
            <th data-breakpoints="all">Description</th>
        </tr>
    </thead>
    <tbody>
        <tr >
            <td>Dennise</td>
            <td><img src="dummy.png"></td>
            <td>November 8th 2011</td>
            <td>Why does it always rain on me?</td>
        </tr>
        <tr>
            <td>Elodia</td>
            <td><img src="dummy.png"></td>
            <td>October 15th 2010</td>
            <td>Goldfish looks awesome.</td>
        </tr>

    </tbody>
</table>

I would like that the change the style so that the picture comes first and then the date and description. Something like this:

enter image description here

Is this possible?

I noticed that FooTable Javascript changes the structure to

<tbody>
  <tr>
    <th>Picture</th>
    <td style="display: table-cell;">
        <img src="dummy.png"></img>
    </td>
  </tr>
  <tr>
     <th>Date</th>
     <td style="display: table-cell;">
         November 8th 2011
     </td>
   </tr>
   <tr>
      <th>Description</th>
      <td style="display: table-cell;">
          Why does it always rain on me?
      </td>
    </tr>

and here I only would need to change the first row to 

  <tr>
    <th rowspan="3"><img src="dummy.png"></img></th>
  </tr>

but I do not know how to achieve this. I found here that one can hook in events, and I guess I somehow need to change the event footable_row_expanded, but I don't know how to do it.

Adam
  • 25,960
  • 22
  • 158
  • 247
  • You can easily achieve this using bootstrap. It's a kind of framework where you only need to specify classes to apply the css you want. Take a look over here: http://getbootstrap.com/css/ To do this manually, you will need to work with float percentages if you want to keep it resizable. – Thibault Fouquaert Jun 24 '16 at 13:35
  • @ThibaultFouquaert I have already a website and I would like to simply use FooTable without converting my whole website to bootstap. I am fine with using float and percentages if this is necessary, I just don't understand how to get started. – Adam Jun 24 '16 at 13:43
  • @ThibaultFouquaert I also think I need to change the javascript code because Footable generates the table with JS. – Adam Jun 24 '16 at 13:43
  • I understand you'd not like to use multiple frameworks/librarys to keep things simple. You will probably need to work with JS to add custom class names to the elements when the a row is collapsed, since FooTable changes its HTML code dynamically when a row is unfolded. If you load your custom css as the last file, it will overwrite the default styles of footable – Thibault Fouquaert Jun 24 '16 at 14:11
  • @ThibaultFouquaert yes, exactly! I only need to find out how to add a JS function whenever a row is unfolded / collapsed. I think this works somehow using the mentioned hooks - but I do not know how to do this. Thats my questions. – Adam Jun 24 '16 at 14:25

0 Answers0