Amaze UI 2.4

CSS

Basic CSS settings, fundamental HTML elements styled and grid system, .etc

TOC

Table

Please pay attention to the completeness of HTML structure of <table>.

Relative JS plugins:

Default Style

Use .am-table。

WebsiteURLCreated Date
Amaze UIhttps://amazeui.github.io2012-10-01
Amaze UIhttps://amazeui.github.io2012-10-01
Amaze UI(Active)https://amazeui.github.io2012-10-01
Amaze UIhttps://amazeui.github.io2012-10-01
Amaze UIhttps://amazeui.github.io2012-10-01
<table class="am-table">
  <thead>
    <tr>
      <th>Website</th>
      <th>URL</th>
      <th>Created Date</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Amaze UI</td>
      <td>https://amazeui.github.io</td>
      <td>2012-10-01</td>
    </tr>
    <tr>
      <td>Amaze UI</td>
      <td>https://amazeui.github.io</td>
      <td>2012-10-01</td>
    </tr>
    <tr class="am-active">
      <td>Amaze UI(Active)</td>
      <td>https://amazeui.github.io</td>
      <td>2012-10-01</td>
    </tr>
    <tr>
      <td>Amaze UI</td>
      <td>https://amazeui.github.io</td>
      <td>2012-10-01</td>
    </tr>
  </tbody>
  <tbody>
  <tr>
    <td>Amaze UI</td>
    <td>https://amazeui.github.io</td>
    <td>2012-10-01</td>
  </tr>
  </tbody>
</table>

Default Border

Use the .am-table-bordered class to create a table with default border.

WebsiteURLCreated Date
Amaze UIhttps://amazeui.github.io2012-10-01
Amaze UIhttps://amazeui.github.io2012-10-01
Amaze UIhttps://amazeui.github.io2012-10-01
Amaze UIhttps://amazeui.github.io2012-10-01
Amaze UIhttps://amazeui.github.io2012-10-01
<table class="am-table am-table-bordered">
    ...
</table>

Round Cornor

Add .am-table-bordered and .am-table-radius to create a table with round border.

WebsiteURLCreated Date
Amaze UIhttps://amazeui.github.io2012-10-01
Amaze UIhttps://amazeui.github.io2012-10-01
Amaze UIhttps://amazeui.github.io2012-10-01
Amaze UIhttps://amazeui.github.io2012-10-01
Amaze UIhttps://amazeui.github.io2012-10-01
<table class="am-table am-table-bordered am-table-radius am-table-striped">
    ...
</table>

Contextual classes

Add following classes to tr to color table rows, and to td to color individual cells.

  • .am-active Activated;
  • .am-disabled Disabled;
  • .am-primary Blue Highlight;
  • .am-success Green Highlight;
  • .am-warning Orange Highlight;
  • .am-danger Red Highlight;
ClassDescriptionTarget Element
.am-activeActivatedtd
.am-activeActivatedtr
.am-disabledDisabledtd
.am-disabledDisabledtr
.am-primaryBlue Highlighttd
.am-primaryBlue Highlighttr
.am-successGreen Highlighttd
.am-successGreen Highlighttr
.am-warningOrange Highlighttd
.am-warningOrange Highlighttr
.am-dangerRed Highlighttd
.am-dangerRed Highlighttr

Other styles

  • .am-table-striped Striped
  • .am-table-hover hover
WebsiteURLCreated Date
Amaze UIhttps://amazeui.github.io2012-10-01
Amaze UIhttps://amazeui.github.io2012-10-01
Amaze UIhttps://amazeui.github.io2012-10-01
Amaze UIhttps://amazeui.github.io2012-10-01
Amaze UIhttps://amazeui.github.io2012-10-01
<table class="am-table am-table-striped am-table-hover">
    ...
</table>

Condensed table

Add the .am-table-compact class to make tables more compact by adjusting padding.

WebsiteURLCreated Date
Amaze UIhttps://amazeui.github.io2012-10-01
Amaze UIhttps://amazeui.github.io2012-10-01
Amaze UI(Active)https://amazeui.github.io2012-10-01
Amaze UIhttps://amazeui.github.io2012-10-01
Amaze UIhttps://amazeui.github.io2012-10-01
<table class="am-table am-table-bordered am-table-striped am-table-compact">
  <thead>
  <tr>
    <th>Website</th>
    <th>URL</th>
    <th>Created Date</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>Amaze UI</td>
    <td>https://amazeui.github.io</td>
    <td>2012-10-01</td>
  </tr>
  <tr>
    <td>Amaze UI</td>
    <td>https://amazeui.github.io</td>
    <td>2012-10-01</td>
  </tr>
  <tr class="am-active">
    <td>Amaze UI(Active)</td>
    <td>https://amazeui.github.io</td>
    <td>2012-10-01</td>
  </tr>
  <tr>
    <td>Amaze UI</td>
    <td>https://amazeui.github.io</td>
    <td>2012-10-01</td>
  </tr>
  <tr>
    <td>Amaze UI</td>
    <td>https://amazeui.github.io</td>
    <td>2012-10-01</td>
  </tr>
  </tbody>
</table>

Responsive

  • .am-text-nowrap: Disable wrap.
  • .am-scrollable-horizontal: Use horizontal scroll when contents overflow.

These two classes is defined in Utility.

-= Head =--= Head =--= Head =--= Head =--= Head =--= Head =--= Head =--= Head =-
DataDataDataDataDataDataDataData
DataDataDataDataDataDataDataData
DataDataDataDataDataDataDataData
<div class="am-scrollable-horizontal">
  <table class="am-table am-table-bordered am-table-striped am-text-nowrap">
    ...
  </table>
</div>

Update

New features in 2.4.x

  • Add .am-table-centered to <table> to apply center align to all the cells.
  • Add .am-text-middle to make the content display in the middle of cell. More detail in Utilily）
Savings for holiday!MonthSavings
$50January$100
February$80
<table class="am-table am-table-bordered am-table-centered">
  <tr>
    <th>Savings for holiday!</th>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td rowspan="2" class="am-text-middle">$50</td>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

Combination of All Styles

WebsiteURLCreated Date
Amaze UIhttps://amazeui.github.io2012-10-01
Amaze UIhttps://amazeui.github.io2012-10-01
Amaze UI(Active)https://amazeui.github.io2012-10-01
Amaze UIhttps://amazeui.github.io2012-10-01
Amaze UIhttps://amazeui.github.io2012-10-01
<table class="am-table am-table-bordered am-table-striped am-table-hover">
    <thead>
        <tr>
            <th>Website</th>
      <th>URL</th>
      <th>Created Date</th>
        </tr>
    </thead>
    <tbody>
        ...
        <tr class="am-active">
            <td>Amaze UI(Active)</td>
            <td>https://amazeui.github.io</td>
            <td>2012-10-01</td>
        </tr>
        ...
    </tbody>
</table>

Reference

侧栏导航
×
Amaze UI 微信
在微信上关注我们