HTML tables in flex layout are getting overlapped after converting to PDF - html

Trying to convert html file to pdf using weasyprint, but due to bug in weasyprint, I can't use flex layout as it is overlapping the two tables in the first row. Is there any other workaround to get two tables in the first row side by side without disturbing other elements like <p> and two tables after that?
Instead of using flexboxes, need to use other alternative to achieve same align as mentioned in sample code!
<html>
<head>
<style>
/* Custom CSS */
table {
border-collapse: collapse;
width: 45%;
}
th,
td {
border: 1px solid black;
padding: 8px;
}
th {
background-color: #f2f2f2;
}
/* td:first-child {
background-color: grey;
} */
.first-column {
background-color: rgb(187, 185, 185);
}
.mainWrapper {
display: flex;
flex-direction: column;
}
.rowTable {
display: flex;
flex-direction: row;
}
/* End Custom CSS */
</style>
</head>
<body>
<div class="mainWrapper">
<div class="rowTable">
<table style="margin-right: 20px;">
<tr>
<td class="first-column">table 111 Header 1</td>
<td>Header 2</td>
</tr>
<tr>
<td class="first-column">Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td class="first-column">Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
<table>
<tr>
<td class="first-column">table 222 Header 1</td>
<td>Header 2</td>
</tr>
<tr>
<td class="first-column">Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td class="first-column">Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
</div>
<div>
<p> some paragraph </p>
<div>
<div>
<table style="margin-bottom:20px;">
<tr>
<th>table 333 Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
<table>
<tr>
<th>table 444 Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Actual output:( in pdf)


You could use display: inline-table; on the tables (without display:flex on their parent element). I can't check that in weasyprint, but you can try:
table {
border-collapse: collapse;
width: 45%;
}
.rowTable table {
display: inline-table;
}
:not(.rowTable) table {
margin: 0 auto;
}
th,
td {
border: 1px solid black;
padding: 8px;
}
th {
background-color: #f2f2f2;
}
.first-column {
background-color: rgb(187, 185, 185);
}
<div class="mainWrapper">
<div class="rowTable">
<table style="margin-right: 20px;">
<tr>
<td class="first-column">table 111 Header 1</td>
<td>Header 2</td>
</tr>
<tr>
<td class="first-column">Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td class="first-column">Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
<table>
<tr>
<td class="first-column">table 222 Header 1</td>
<td>Header 2</td>
</tr>
<tr>
<td class="first-column">Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td class="first-column">Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
</div>
<div>
<p> some paragraph </p>
<div>
<div>
<table style="margin-bottom:20px;">
<tr>
<th>table 333 Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
<table>
<tr>
<th>table 444 Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
</div>
</div>

Related

How can I apply style to each last rows before specific class in a table?

I need to style the last row in each group (that is Row 3, Row 5 and Row 8). My css sample only apply style to Row 8.
Code:
tr.row:last-child td {
background-color: red;
}
<table>
<tr class="group">
<td>Group 1</td>
</tr>
<tr class="row">
<td>Row 1</td>
</tr>
<tr class="row">
<td>Row 2</td>
</tr>
<tr class="row">
<td>Row 3</td>
</tr>
<tr class="group">
<td>Group 2</td>
</tr>
<tr class="row">
<td>Row 4</td>
</tr>
<tr class="row">
<td>Row 5</td>
</tr>
<tr class="group">
<td>Group 3</td>
</tr>
<tr class="row">
<td>Row 6</td>
</tr>
<tr class="row">
<td>Row 7</td>
</tr>
<tr class="row">
<td>Row 8</td>
</tr>
</table>

CSS Excel-like 'Freeze panes' where the top lines stay above the columns?

I'm trying to achieve the following effect: I have a large table, generated from a mysql query, and I want the top rows to stay on the page, while the body of the table scrolls vertically.
I've managed to get that working, BUT I also want the entire table to be horizontally scrollable, because part of it is off the right edge of the window.
I've been working on this for days, and I'd be grateful for some help.
Here's what I've come up with so far:
My table looks like this:
<div id="topLines">
<div id="controlLine">
<div id="testheader">
This text is fixed!
</div>
</div>
</div>
<div class="resetFloat"></div>
<div id="memberTable">
<div id="tableHeader">
<div class="columnTitle" style="width: 100px;">Title 1</div>
<div class="columnTitle" style="width: 100px;">Title 2</div>
<div class="columnTitle" style="width: 100px;">Title 3</div>
.
.
.
<div class="columnTitle" style="width: 100px;">Title n</div>
</div>
<div class="resetFloat"></div>
<div id="tableBody">
<div class="tableRow">
<div class="tableCell" style="width: 100px;">Cell 1-1</div>
<div class="tableCell" style="width: 100px;">Cell 1-2</div>
.
.
</div>
<div class="resetFloat"></div>
<div class="tableRow">
<div class="tableCell" style="width: 100px;">Cell 2-1</div>
.
.
</div>
<div class="resetFloat"></div>
<div class="tableRow">
<div class="tableCell" style="width: 100px;">Cell 3-1</div>
.
.
</div>
<div class="resetFloat"></div>
<div class="tableRow">
<div class="tableCell" style="width: 100px;">Cell 4-1</div>
.
.
</div>
<div class="resetFloat"></div>
.
.
</div>
</div>
Here's my CSS:
.resetFloat{
clear: both;
}
#topLines{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50px;
overflow: hidden;
}
#controlLine{
float: left;
width: 5000px;
height: 50px;
}
#memberTable{
float: left;
position: fixed;
top: 50px;
width: 5000px;
overflow-x: scroll;
overflow-y: hidden;
}
#tableHeader{
position: fixed;
top: 60px;
float: left;
height: 45px;
width: 8000px;
border-bottom: solid 1px white;
}
.columnTitle{
float: left;
text-align: center;
border-right: solid 1px white;
height: 45px;
}
#tableBody{
position: fixed;
top: 120px; /*Set top value to HeightOfTopFrameDiv*/
left: 0;
bottom: 0;
overflow-y: scroll;
width: 5000px;
}
.tableRow{
float: left;
width 5000px;
}
.tableCell{
float: left;
height: 30px;
border-right: solid 1px white;
}

body{
margin:0}
/* table with a fixed head*/
.table-holder {
position:fixed;
top:40pt;
left:0;right:0;
bottom:0;
overflow-y: scroll;
}
.table-fixed-head {
position: relative;
width: 100%
}
.table-fixed-head th {
position: sticky;
top: 0;
background-color: #efefef;
text-align: left;
}
/* make top lines fixed */
#topLines{
height:40pt;
position:fixed;
left:0;
right:0;
background:#aaa;
z-index:20
}
<!--options-->
<div id="topLines">
<div id="controlLine">
<div id="testheader">
This text is fixed!
</div>
</div>
</div>
<!--table-->
<div class="table-holder">
<table class="table-fixed-head">
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>row 1</td>
<td>row 1</td>
<td>row 1</td>
<td>row 1</td>
</tr>
<tr>
<td>row 2</td>
<td>row 2</td>
<td>row 2</td>
<td>row 2</td>
</tr>
<tr>
<td>row 2</td>
<td>row 2</td>
<td>row 2</td>
<td>row 2</td>
</tr>
<tr>
<td>row 2</td>
<td>row 2</td>
<td>row 2</td>
<td>row 2</td>
</tr>
<tr>
<td>row 2</td>
<td>row 2</td>
<td>row 2</td>
<td>row 2</td>
</tr>
<tr>
<td>row 3</td>
<td>row 3</td>
<td>row 3</td>
<td>row 3</td>
</tr>
<tr>
<td>row 3</td>
<td>row 3</td>
<td>row 3</td>
<td>row 3</td>
</tr>
<tr>
<td>row 3</td>
<td>row 3</td>
<td>row 3</td>
<td>row 3</td>
</tr>
<tr>
<td>row 3</td>
<td>row 3</td>
<td>row 3</td>
<td>row 3</td>
</tr>
<tr>
<td>row 3</td>
<td>row 3</td>
<td>row 3</td>
<td>row 3</td>
</tr>
<tr>
<td>row 3</td>
<td>row 3</td>
<td>row 3</td>
<td>row 3</td>
</tr>
<tr>
<td>row 3</td>
<td>row 3</td>
<td>row 3</td>
<td>row 3</td>
</tr>
<tr>
<td>row 3</td>
<td>row 3</td>
<td>row 3</td>
<td>row 3</td>
</tr>
<tr>
<td>row 3</td>
<td>row 3</td>
<td>row 3</td>
<td>row 3</td>
</tr>
<tr>
<td>row 3</td>
<td>row 3</td>
<td>row 3</td>
<td>row 3</td>
</tr>
<tr>
<td>row 3</td>
<td>row 3</td>
<td>row 3</td>
<td>row 3</td>
</tr>
</tbody>
</table>
</div>

highlight a column on table element - CSS

I have a table constructed in the following format:
<thead>
<th></th>
<th></th>
<th></th>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
I'm trying to highlight a column if the header column is hovered. So let's say if I hovered the second header <th> from, say blue, then the second <td> from every <tr>, which makes it a column, will be highlighted in yellow. How can I achieve this? I've tried many different ways but its not highlighting the <tr>, only the header. I would like to keep it in a table structure. Can anybody help with this?

you can do something like this:
<table>
<thead>
<th>head 1</th>
<th>head 2</th>
<th>head 3</th>
</thead>
<tbody>
<tr>
<td>row 1 cell 1</td>
<td>row 1 cell 2</td>
<td>row 1 cell 3</td>
</tr>
<tr>
<td>row 2 cell 1</td>
<td>row 2 cell 2</td>
<td>row 2 cell 3</td>
</tr>
<tr>
<td>row 3 cell 1</td>
<td>row 3 cell 2</td>
<td>row 3 cell 3</td>
</tr>
</tbody>
</table>
and css
table {
overflow: hidden;
}
td, th {
position: relative;
}
th:hover {background-color:blue;}
th:hover::after {
content: "";
position: absolute;
background-color: grey;
left: 0;
top: -5000px;
height: 10000px;
width: 100%;
z-index: -1;
}

Vertical bar for each tbody inside a table

I've a dynamic HTML page which has a table with multiple 'tbody' elements.
Now, I'm stuck with CSS as I need to show a vertical bar inside each of the 'tbody' as shown in the image attached.
How could I get this done? I tried using 'tr::after' and creating a bar, but didn't help.
Here's my html:
Could you please help me achieve this?
<table>
<tbody class="container">
<tr>
<td>Row 1 Column 1</td>
<td>Row 1 Column 2</td>
</tr>
<tr>
<td>Row 2 Column 1</td>
<td>Row 2 Column 2</td>
</tr>
<tr>
<td>Row 3</td>
</tr>
</tbody>
<tbody class="container">
<tr>
<td>Row 1 Column 1</td>
<td>Row 1 Column 2</td>
</tr>
<tr>
<td>Row 2 Column 1</td>
<td>Row 2 Column 2</td>
</tr>
<tr>
<td>Row 3</td>
</tr>
</tbody>
<tbody class="container">
<tr>
<td>Row 1 Column 1</td>
<td>Row 1 Column 2</td>
</tr>
<tr>
<td>Row 2 Column 1</td>
<td>Row 2 Column 2</td>
</tr>
<tr>
<td>Row 3</td>
</tr>
</tbody>
</table>

In addition to #connor
This does the trick:
tbody {
margin: 10px;
display: block;
}
<style>
table {
border-collapse: collapse;
}
td:first-child {
border-right: 1px solid #000;
}
tbody {
margin: 10px;
display: block;
}
</style>
<table>
<tbody class="container">
<tr>
<td>Row 1 Column 1</td>
<td>Row 1 Column 2</td>
</tr>
<tr>
<td>Row 2 Column 1</td>
<td>Row 2 Column 2</td>
</tr>
<tr>
<td>Row 3</td>
</tr>
</tbody>
<tbody class="container">
<tr>
<td>Row 1 Column 1</td>
<td>Row 1 Column 2</td>
</tr>
<tr>
<td>Row 2 Column 1</td>
<td>Row 2 Column 2</td>
</tr>
<tr>
<td>Row 3</td>
</tr>
</tbody>
<tbody class="container">
<tr>
<td>Row 1 Column 1</td>
<td>Row 1 Column 2</td>
</tr>
<tr>
<td>Row 2 Column 1</td>
<td>Row 2 Column 2</td>
</tr>
<tr>
<td>Row 3</td>
</tr>
</tbody>
</table>

Try giving the :first-child td a border-right. If you're gonna have multiple columns, in stead of 2, try using :not(:last-child) in stead of :first-child.
<style>
table {
border-collapse: collapse;
}
td:first-child {
border-right: 1px solid #000;
}
</style>
<table>
<tbody class="container">
<tr>
<td>Row 1 Column 1</td>
<td>Row 1 Column 2</td>
</tr>
<tr>
<td>Row 2 Column 1</td>
<td>Row 2 Column 2</td>
</tr>
<tr>
<td>Row 3</td>
</tr>
</tbody>
<tbody class="container">
<tr>
<td>Row 1 Column 1</td>
<td>Row 1 Column 2</td>
</tr>
<tr>
<td>Row 2 Column 1</td>
<td>Row 2 Column 2</td>
</tr>
<tr>
<td>Row 3</td>
</tr>
</tbody>
<tbody class="container">
<tr>
<td>Row 1 Column 1</td>
<td>Row 1 Column 2</td>
</tr>
<tr>
<td>Row 2 Column 1</td>
<td>Row 2 Column 2</td>
</tr>
<tr>
<td>Row 3</td>
</tr>
</tbody>
</table>

CSS Table responsiveness format

I have not found the exact example for this so please point me to a link if you have.
I want to make a table in HTML be responsive as follows - is it possible with CSS?
<table>
<thead>
<tr>
<td>HEADER Data 1</td>
<td>HEADER Data 2</td>
<td>HEADER Data 3</td>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
<td>Row 1 Data 3</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
<td>Row 2 Data 3</td>
</tr>
<tr>
<td>Row 3 Data 1</td>
<td>Row 3 Data 2</td>
<td>Row 3 Data 3</td>
</tr>
</tbody>
</table>
On small screens I want the table responsive so that is places the data as follows:
HEADER Data 1
Row 1 Data 1
Row 1 Data 2
Row 1 Data 3
HEADER Data 2
Row 2 Data 1
Row 2 Data 2
Row 2 Data 3
HEADER Data 3
Row 3 Data 1
Row 3 Data 2
Row 3 Data 3

I hope this will help in making a table responsive.
Here's a fiddle
HTML :
<table>
<thead>
<tr>
<td>Name</td>
<td>Age</td>
<td>Gender</td>
</tr>
</thead>
<tbody>
<tr>
<td>Qasim</td>
<td>23yrs</td>
<td>Male</td>
</tr>
<tr>
<td>Ali</td>
<td>19yrs</td>
<td>Male</td>
</tr>
<tr>
<td>William</td>
<td>34yrs</td>
<td>Male</td>
</tr>
</tbody>
</table>
CSS :
td{
width:100px;
}
#media (max-width: 600px) {
thead {
display: none;
}
tr{
display:grid;
border-bottom:1px solid #000000;
}
td:nth-of-type(1):before { content: "Name"; }
td:nth-of-type(2):before { content: "Age"; }
td:nth-of-type(3):before { content: "Gender"; }
td:before{
width:150px;
float:left;
}
td{
width:300px;
}
}

Put a copy of each header inside the corresponding row, and hide it with the CSS pseudo-selector :first-child. Then use media query to change the layout, hide the normal headers, and display the hidden headers.
HTML:
<table>
<thead>
<tr>
<td>HEADER Data 1</td>
<td>HEADER Data 2</td>
<td>HEADER Data 3</td>
</tr>
</thead>
<tbody>
<tr>
<td>HEADER Data 1</td>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
<td>Row 1 Data 3</td>
</tr>
<tr>
<td>HEADER Data 2</td>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
<td>Row 2 Data 3</td>
</tr>
<tr>
<td>HEADER Data 3</td>
<td>Row 3 Data 1</td>
<td>Row 3 Data 2</td>
<td>Row 3 Data 3</td>
</tr>
</tbody>
</table>
CSS:
tbody tr td:first-child {
display: none;
}
#media (max-width: 600px) {
thead {
display: none;
}
td {
display: block;
clear: left;
}
tbody tr td:first-child {
display: block;
}
}
Here's a fiddle.