Tables
How to use this component
Tables should only be used for tabular data, and when that data cannot really be displayed in a better way.
For example the data may be better presented using accordions or tabs. These are more accessible than tables.
To make tables more accesible we need to add a caption, summary and set the scope. Read more on accessible tables.
Note:
Ensure the table has <div class=”overflow”></div> around it to allow scrolling on smaller devices.
Ensure the table doesn’t have fixed widths in it as these should be set as a percentage.
If the table has more than 3 colums, set the table width to 100%.
Code Resource
<div class="overflow">
<table cellspacing="0" cellpadding="5" border="0" class="ms-rteTable-ccouncil" summary="Table summary here.">
<caption>Caption here</caption>
<thead>
<tr class="ms-rteTableHeaderRow-ccouncil">
<th scope="col" class="ms-rteTableHeaderEvenCol-ccouncil">Column 1</th>
<th scope="col" class="ms-rteTableHeaderOddCol-ccouncil">Column 2</th>
<th scope="col" class="ms-rteTableHeaderOddCol-ccouncil">Column 3</th>
</tr>
</thead>
<tbody>
<tr class="ms-rteTableOddRow-ccouncil">
<td class="ms-rteTableEvenCol-ccouncil">Data 1</td>
<td class="ms-rteTableEvenCol-ccouncil">Data 2</td>
<td class="ms-rteTableEvenCol-ccouncil">Data 3</td>
</tr>
<tbody>
</table>
</div>/*Council Custom table styling*/
.ms-rteTable-ccouncil{
-ms-name:"Table Style Cardiff Council";
text-align: left;
vertical-align:middle;
color:#000000;
border: 1px solid #e0e0e0;
/*line-height: 30px;*/
}
.ms-rteTable-ccouncil th.ms-rteTableHeaderRow-ccouncil,
.ms-rteTable-ccouncil tr.ms-rteTableFooterRow-ccouncil{
background-color:#FFF;
border-top:1px #01383f solid;
border-bottom:1px #01383f solid;
}
.ms-rteTable-ccouncil th.ms-rteTableHeaderFirstCol-ccouncil,
.ms-rteTable-ccouncil th.ms-rteTableFooterFirstCol-ccouncil{
background: #05616d;
list-style: none;
text-decoration: none;
padding: 12px;
color: white;
}
.ms-rteTable-ccouncil th.ms-rteTableHeaderOddCol-ccouncil,
.ms-rteTable-ccouncil td.ms-rteTableFooterOddCol-ccouncil{
background: #05616d;
list-style: none;
text-decoration: none;
padding: 12px;
color: white;
}
.ms-rteTable-ccouncil th.ms-rteTableHeaderEvenCol-ccouncil,
.ms-rteTable-ccouncil td.ms-rteTableFooterEvenCol-ccouncil{
background: #05616d;
list-style: none;
text-decoration: none;
padding: 12px!important;
color: white;
}
.ms-rteTable-ccouncil th.ms-rteTableHeaderLastCol-ccouncil,
.ms-rteTable-ccouncil td.ms-rteTableFooterLastCol-ccouncil{
background: #05616d;
list-style: none;
text-decoration: none;
padding: 12px;
color: white;
}
.ms-rteTable-ccouncil tr.ms-rteTableOddRow-ccouncil{
text-decoration: none;
color: #333 !important;
list-style: none;
line-height: 30px;
padding: 0px;
width: 99.9%;
background: rgb(249,249,249);
border-bottom: 1px solid #e6e6e6;
}
.ms-rteTable-ccouncil tr.ms-rteTableEvenRow-ccouncil{
text-decoration: none;
color: #333 !important;
list-style: none;
line-height: 30px;
padding: 0px;
width: 99.9%;
background: rgb(253 252 252);
border-bottom: 1px solid #e6e6e6;
}
.ms-rteTable-ccouncil th.ms-rteTableFirstCol-ccouncil{
font-weight:normal;
text-align: left;
padding:12px!important;
}
.ms-rteTable-ccouncil td.ms-rteTableLastCol-ccouncil{
font-weight:normal;
}
.ms-rteTable-ccouncil td.ms-rteTableOddCol-ccouncil{
text-align: left ;
padding:10px;
}
.ms-rteTable-ccouncil td.ms-rteTableEvenCol-ccouncil{
text-align: left ;
padding:10px;
}
.ms-rteTableGrid td,.ms-rteTableGrid th{
border:1px dotted black;
}
.overflow {
overflow:auto;
float:left;
width: 100%;
}
caption {
color: #000;
padding: 5px !important;
font-size: 1.1em;
font-weight: normal;
text-align: left;
}
/*Council Custom table styling*/
Working Example
| Column 1 | Column 2 | Column 3 |
|---|---|---|
| Data 1 | Data 2 | Data 3 |