The new AHA notice table is fully responsive with modern looks and feel with accessibility features. The layout is using Bootstrap 4.5 with flex box.
| Hospital Name | Program | Country | Program Type |
|---|---|---|---|
Hospital Name A | Stroke | India | Primary |
Hospital Name A | Stroke | India | Primary |
Hospital Name A | Stroke | India | Primary |
Hospital Name A | Stroke | India | Primary |
<table class="aui-responsive-table">
<thead>
<tr>
<th scope="col">Hospital Name</th>
<th scope="col">Program</th>
<th scope="col">Country</th>
<th scope="col">Program Type</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="Hospital Name">
<div class="aui-td">Hospital Name A</div>
</td>
<td data-title="Program">
<div class="aui-td">Stroke</div>
</td>
<td data-title="Country">
<div class="aui-td">India</div>
</td>
<td data-title="Program Type">
<div class="aui-td">Primary</div>
</td>
</tr>
<tr>
<td data-title="Hospital Name">
<div class="aui-td">Hospital Name A</div>
</td>
<td data-title="Program">
<div class="aui-td">Stroke</div>
</td>
<td data-title="Country">
<div class="aui-td">India</div>
</td>
<td data-title="Program Type">
<div class="aui-td">Primary</div>
</td>
</tr>
<tr>
<td data-title="Hospital Name">
<div class="aui-td">Hospital Name A</div>
</td>
<td data-title="Program">
<div class="aui-td">Stroke</div>
</td>
<td data-title="Country">
<div class="aui-td">India</div>
</td>
<td data-title="Program Type">
<div class="aui-td">Primary</div>
</td>
</tr>
<tr>
<td data-title="Hospital Name">
<div class="aui-td">Hospital Name A</div>
</td>
<td data-title="Program">
<div class="aui-td">Stroke</div>
</td>
<td data-title="Country">
<div class="aui-td">India</div>
</td>
<td data-title="Program Type">
<div class="aui-td">Primary</div>
</td>
</tr>
</tbody>
</table>| Hospital Name | Program | Country | Program Type |
|---|
<table class="aui-responsive-table aui-table-loader" role="alert" aria-live="assertive" aria-label="Table is Loading" tabIndex="0">
<thead>
<tr>
<th scope="col">Hospital Name</th>
<th scope="col">Program</th>
<th scope="col">Country</th>
<th scope="col">Program Type</th>
</tr>
</thead>
</table>| Hospital Name | Program | Country | Program Type |
|---|---|---|---|
Hospital Name A | Stroke | India | Primary |
Hospital Name A | Stroke | India | Primary |
Hospital Name A | Stroke | India | Primary |
Hospital Name A | Stroke | India | Primary |
<table class="aui-responsive-table aui-table-borderbottom">
<thead>
<tr>
<th scope="col">Hospital Name</th>
<th scope="col">Program</th>
<th scope="col">Country</th>
<th scope="col">Program Type</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="Hospital Name">
<div class="aui-td">Hospital Name A</div>
</td>
<td data-title="Program">
<div class="aui-td">Stroke</div>
</td>
<td data-title="Country">
<div class="aui-td">India</div>
</td>
<td data-title="Program Type">
<div class="aui-td">Primary</div>
</td>
</tr>
<tr>
<td data-title="Hospital Name">
<div class="aui-td">Hospital Name A</div>
</td>
<td data-title="Program">
<div class="aui-td">Stroke</div>
</td>
<td data-title="Country">
<div class="aui-td">India</div>
</td>
<td data-title="Program Type">
<div class="aui-td">Primary</div>
</td>
</tr>
<tr>
<td data-title="Hospital Name">
<div class="aui-td">Hospital Name A</div>
</td>
<td data-title="Program">
<div class="aui-td">Stroke</div>
</td>
<td data-title="Country">
<div class="aui-td">India</div>
</td>
<td data-title="Program Type">
<div class="aui-td">Primary</div>
</td>
</tr>
<tr>
<td data-title="Hospital Name">
<div class="aui-td">Hospital Name A</div>
</td>
<td data-title="Program">
<div class="aui-td">Stroke</div>
</td>
<td data-title="Country">
<div class="aui-td">India</div>
</td>
<td data-title="Program Type">
<div class="aui-td">Primary</div>
</td>
</tr>
</tbody>
</table>| Hospital Name A | Stroke |
|---|---|
| Hospital Name A | Stroke |
| Hospital Name A | Stroke |
| Hospital Name A | Stroke |
<table class="aui-responsive-table aui-table-cols">
<tbody>
<tr>
<th scope="row" class="aui-row-th">
Hospital Name A
</th>
<td class="aui-row-td">
Stroke
</td>
</tr>
<tr>
<th scope="row" class="aui-row-th">
Hospital Name A
</th>
<td class="aui-row-td">
Stroke
</td>
</tr>
<tr>
<th scope="row" class="aui-row-th">
Hospital Name A
</th>
<td class="aui-row-td">
Stroke
</td>
</tr>
<tr>
<th scope="row" class="aui-row-th">
Hospital Name A
</th>
<td class="aui-row-td">
Stroke
</td>
</tr>
</tbody>
</table><table class="aui-responsive-table aui-table-cols aui-table-loader" role="alert" aria-live="assertive" aria-label="Table is Loading" tabIndex="0">
</table>| Hospital Name | Program | Country | Program Type |
|---|---|---|---|
| Hospital Name A | Stroke | India | Primary |
| Hospital Name A | Stroke | India | Primary |
| Hospital Name A | Stroke | India | Primary |
| Hospital Name A | Stroke | India | Primary |
<div class="table-responsive aui-table">
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Hospital Name</th>
<th scope="col">Program</th>
<th scope="col">Country</th>
<th scope="col">Program Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hospital Name A</td>
<td>Stroke</td>
<td>India</td>
<td>Primary</td>
</tr>
<tr>
<td>Hospital Name A</td>
<td>Stroke</td>
<td>India</td>
<td>Primary</td>
</tr>
<tr>
<td>Hospital Name A</td>
<td>Stroke</td>
<td>India</td>
<td>Primary</td>
</tr>
<tr>
<td>Hospital Name A</td>
<td>Stroke</td>
<td>India</td>
<td>Primary</td>
</tr>
</tbody>
</table>
</div>