Table Styling

From All n One's bxp software Wixi

Jump to: navigation, search

Overview

bxp can adopt a look from other known office tools and using a well-known package to suggest some HTML interpretations.


bxpR10SER1 015.png


These styles are implemented using the following CSS tags on tables.

  • css_Table_New_Table
  • css_Table_First_Cell
  • css_Table_First_Row
  • css_Table_Data_FirstCell
  • css_Table_Data_DataCell
  • css_Table_Data_LastCell
  • css_Table_Data_Alt_FirstCell
  • css_Table_Data_Alt_DataCell
  • css_Table_Data_Alt_LastCell
  • css_Table_Last_FirstCell
  • css_Table_Last_Row
  • css_Table_Last_LastCell


These tags are then set with appropriate styles and makes styling really easy to apply.


It is possible to overwrite these styles with your own custom implementations


Application of styling can vary throughout the system. i.e. there will be a master default but some reports will allow “selective” styling.


This change will affect where clients might have customisations or expect data to appear in particular layouts.


A default style matching current styles will be created BUT the HTML will have the new css Headers added.


<table class="css_Table_New_Table">
	<tr>
		<td class="css_Table_First_Cell">A</td>
		<td class="css_Table_First_Row">B</td>
		<td class="css_Table_First_Row">C</td>
		<td class="css_Table_First_Row">D</td>
	</tr>
	<tr>
		<td class="css_Table_Data_FirstCell">i</td>
		<td class="css_Table_Data_DataCell">ii</td>
		<td class="css_Table_Data_DataCell">iii</td>
		<td class="css_Table_Data_LastCell">iv</td>
	</tr>
	<tr>
		<td class="css_Table_Data_Alt_FirstCell">1</td>
		<td class="css_Table_Data_Alt_DataCell">2</td>
		<td class="css_Table_Data_Alt_DataCell">3</td>
		<td class="css_Table_Data_Alt_LastCell">4</td>
	</tr>
	<tr>
		<td class="css_Table_Data_FirstCell">i</td>
		<td class="css_Table_Data_DataCell">ii</td>
		<td class="css_Table_Data_DataCell">iii</td>
		<td class="css_Table_Data_LastCell">iv</td>
	</tr>
	<tr>
		<td class="css_Table_Data_Alt_FirstCell">1</td>
		<td class="css_Table_Data_Alt_DataCell">2</td>
		<td class="css_Table_Data_Alt_DataCell">3</td>
		<td class="css_Table_Data_Alt_LastCell">4</td>
	</tr>
	<tr>
		<td class="css_Table_Last_FirstCell">a</td>
		<td class="css_Table_Last_Row">b</td>
		<td class="css_Table_Last_Row">c</td>
		<td class="css_Table_Last_LastCell">d</td>
	</tr>
</table>