CSS: fixed columns / plant stages

by Stephane de Luca

HTML

<table>
<tbody>
							<tr>
								<td ng-bind-html="subtitle" class="ng-binding"></td>
								<!-- ngRepeat: stage in stages --><td ng-repeat="stage in stages" class="selectable stage stage1" ng-class="{'selected': affectedstages.indexOf(stage.id) &gt; -1 }" ng-click="openPage({stage:'plant/stages/' + stage.id  + (hub?'/hub':'') })">
								</td><!-- end ngRepeat: stage in stages --><td ng-repeat="stage in stages" class="selectable stage stage2" ng-class="{'selected': affectedstages.indexOf(stage.id) &gt; -1 }" ng-click="openPage({stage:'plant/stages/' + stage.id  + (hub?'/hub':'') })">
								</td><!-- end ngRepeat: stage in stages --><td ng-repeat="stage in stages" class="selectable stage stage3" ng-class="{'selected': affectedstages.indexOf(stage.id) &gt; -1 }" ng-click="openPage({stage:'plant/stages/' + stage.id  + (hub?'/hub':'') })">
								</td><!-- end ngRepeat: stage in stages --><td ng-repeat="stage in stages" class="selectable stage stage4" ng-class="{'selected': affectedstages.indexOf(stage.id) &gt; -1 }" ng-click="openPage({stage:'plant/stages/' + stage.id  + (hub?'/hub':'') })">
								</td><!-- end ngRepeat: stage in stages --><td ng-repeat="stage in stages" class="selectable stage stage5" ng-class="{'selected': affectedstages.indexOf(stage.id) &gt; -1 }" ng-click="openPage({stage:'plant/stages/' + stage.id  + (hub?'/hub':'') })">
								</td><!-- end ngRepeat: stage in stages --><td ng-repeat="stage in stages" class="selectable stage stage6" ng-class="{'selected': affectedstages.indexOf(stage.id) &gt; -1 }" ng-click="openPage({stage:'plant/stages/' + stage.id  + (hub?'/hub':'') })">
								</td><!-- end ngRepeat: stage in stages --><td ng-repeat="stage in stages" class="selectable stage stage7" ng-class="{'selected': affectedstages.indexOf(stage.id) &gt; -1 }" ng-click="openPage({stage:'plant/stages/' + stage.id  + (hub?'/hub':'') })">
								</td><!-- end ngRepeat: stage in stages --><td ng-repeat="stage in stages" class="selectable...

CSS

table{
    border: 1px solid black;
    table-layout: fixed;
    width: 100%;
    height: 100px;
}

th, td {
    border: 1px solid black;
    overflow: hidden;
    width: 100px;
    
}

tr:first-child {
    height: 200px;
}