Jump to content

Table with Download botton or link


Pankaj Gade
 Share

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 comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...