Jump to content

Table with Download botton or link


Recommended Posts

This is pretty simple, it uses a standard table structure. Here's an unstyled version for you.

<table>
  <tbody><tr>
    <th style="width:20%;">Class</th>
    <th style="width:72%;">Description</th>
    <th style="width:8%;">Example</th>
  </tr>
  <tr>
    <td>.table</td>
    <td>Adds basic styling (light padding and only horizontal dividers) to any &lt;table&gt;</td>
    <td><a href="#">Try it</a></td>
  </tr>
  <tr>
    <td>.table-striped</td>
    <td>Adds zebra-striping to any table row within &lt;tbody&gt; (not available in IE8)</td>
    <td><a href="#">Try it</a></td>
  </tr>
  <tr>
    <td>.table-bordered</td>
    <td>Adds border on all sides of the table and cells</td>
    <td><a href="#">Try it</a></td>
  </tr>
  <tr>
    <td>.table-hover</td>
    <td>Enables a hover state on table rows within a &lt;tbody&gt;</td>
    <td><a href="#">Try it</a></td>
  </tr>
  <tr>
    <td>.table-condensed</td>
    <td>Makes table more compact by cutting cell padding in half</td>
    <td><a href="#">Try it</a></td>
  </tr>
  <tr>
    <td colspan="2"><em>Combining all the table classes</em></td>
    <td><a href="#">Try it</a></td>
  </tr>
</tbody></table>

The buttons are just styled <a> tags. Should be able to change it up by setting background-color to green or something.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...