JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<body>
<table>
<thead>
<tr>
<th>Head1</th>
<th colspan="10">Head2</th>
<th colspan="10">Head3</th>
<th colspan="11">Head4</th>
<th colspan="15">Head5</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Foot1</th>
<td colspan="10">Foot2</th>
<td colspan="10">Foot3</th>
<td colspan="11">Foot4</th>
<td colspan="15">Foot5</th>
</tr>
</tfoot>
<tbody>
<tr>
<td class="leftHeader">CHead1.1</td>
<td class="leftHeader">CHead2.1</td>
<td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah-5</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blahx</td><td>blah1</td><td>blah2</td><td>blah3</td><td>blah4</td><td>blah5</td><td>blah6xxxxxxx</td>
</tr>
<tr>
<td class="leftHeader">CHead1.2</td>
<td class="leftHeader">CHead2.2</td>
<td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah-5</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blah</td><td>blahx</td><td>blah1</td><td>blah2</td><td>blah3</td><td>blah4</td><td>blah5</td><td>blah6xxxxxxx</td>
</tr>
<tr>
<td class="leftHeader">CHead1.3</td>
<td...
CSS
table {
border-collapse:collapse;
border: 1px solid black;
}
table td, table th {
padding: 8px;
border: 1px solid black;
}
JavaScript
/**
* pdfPage, verticalTableSplit_ClassName, verticalTableSplit_leftHeaderClassName
* You can overwrite these parameters in the page from where you are loading this script
* (and after the point where you loaded it) so you can set pdfPage in one place and use,
* if you need it, both this script and the one that split horizontally the table
* (wkhtmltopdf.tablesplit.js on GitHub or his forks, see the disclaimer on top)
*/
var pdfPage = {
width: 11.7,
height: 8.3,
margins: {
top: 2/25.4,
left: 2/25.4,
right: 2/25.4,
bottom: 26/25.4
}
};
// class name of the tables to automatically split: if not specified, split all tables
//var verticalTableSplit_ClassName = 'splitForPrint';
var verticalTableSplit_ClassName = '';
// class name to specify which columns are part of the vertical left header
var verticalTableSplit_leftHeaderClassName = 'leftHeader';
// add_columns
// Copy columns from the rows $rows to $target_table in the range of indices "from_idx" and "to_idx"
function add_columns($rows, $target_table, from_idx, to_idx) {
$rows.each(function() {
var $tr = $(this);
$target_table.find('> tbody > tr:eq('+$tr.index()+')')
.html(
$('<div>')
.append(
$tr.find('> td.' + verticalTableSplit_leftHeaderClassName).clone()
)
.append(
$tr.find('td').slice(from_idx, to_idx+1).clone()
)
.html()
);
});
}
// getHeaderRange
// Calculate header columns range based on data columns indeces "from_idx" and "to_idx", taking into account that headers columns can have colspan
// attribute (while this function don't manage properly data columns with colspan attributes)
function getHeaderRange($row, from_idx, to_idx) {
var $header, $new_header_row, cols_counter, start_idx, end_idx, start_diff_colspan, end_diff_colspan, colspan, diff_col_idx, start_colspan, end_colspan;
cols_counter = 0;
start_idx = undefined;
end_idx = undefined;
start_diff_colspan = undefined;
end_diff_colspan =...