I have a SharePoint table table#layoutsTable that is automatically generated. I managed to wrap the entire table with a div.row element. I am now attempting to assign specific classes to individual td elements using columns + .large-# based on the width property of each cell. Here's the abbreviated HTML code snippet:
<span id="DeltaPlaceHolderMain">
...
<div class="row">
<table id="layoutsTable" style="width: 100%;">
<tbody>
<tr style="vertical-align: top;">
<td style="width: 66.6%;">
...
</td>
<td style="width: 33.3%;">
...
</td>
</tr>
</tbody>
</table>
</div>
...
</span>
The manual wrapping of <div class="row"> into the markup has been executed using jQuery. The code snippet below shows my attempt to add classes to individual cells:
$(document).ready(function(){
$('table#layoutsTable').wrap('<div class="row">'); //works correctly
$('table#layoutsTable td').each(function(){
var width = $(this).css('width');
console.log(width);
if(width === '66.6%'){
$(this).addClass('large-8 columns');
}
if(width === '33.3%'){
$(this).addClass('large-4 columns');
}
});
});
Another approach (though limited for responsiveness) is directly adding these responsive classes to the cells themselves which is not my preferred method.