Displaying Table Headers on Page Breaks in Laravel PDF with Webkit Technology

Let me provide some context: I am utilizing Laravel to generate a view that is then converted to a PDF using barryvdh/laravel-snappy with the help of wkhtmltopdf, and everything is functioning as expected.

However, I am encountering difficulties in styling a table within the view to meet my specific requirements. This pertains more to an HTML/CSS issue since it involves an invoice layout containing client address details at the top and a multi-page table.

My concern lies in ensuring that the table headers persist on each page when the table spans multiple pages. Typically, this could be achieved using the thead element, but it seems that wkhtmltopdf (which is based on Webkit) does not support this feature.

While I have come across information suggesting this was a known issue with Chrome/Webkit, I am curious if anyone has devised a workaround or if a solution now exists to address this limitation.

Answer №1

Allow me to provide you with some helpful links for your reference.

https://github.com/wkhtmltopdf/wkhtmltopdf/issues/2367 https://github.com/wkhtmltopdf/wkhtmltopdf/issues/1770#issuecomment-73530576

In my case, the following lines of code proved to be effective:

thead { display: table-header-group }
tfoot { display: table-row-group }
tr { page-break-inside: avoid }

Implementing these three lines of code resolved the issue for me. If you have a better solution, please do not hesitate to share. Thank you.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Obtain the full HTML code for a Facebook album

I am attempting to extract the HTML code from a Facebook album in order to retrieve the photo links. However, since not all photos load at once, cURL only retrieves the links of photos that are initially loaded. Is there a way to fetch the entire loaded H ...

Ways to showcase a textbox input in different DIVs multiple times

I am struggling to showcase the content of a textarea within multiple div elements when a user inputs text. The value only appears in the first div, but I want it to display in every div. Here is my HTML and jQuery code: <input type="textarea" id="my ...

Utilizing CSS3 Columns to control the flow of elements and enforce breaks

Struggling to articulate my question, but I'll give it a shot :D Let's talk about the images: I'm having trouble explaining, I want to align the elements like in the first image, but all I'm getting is the second and third pictures. C ...

Clear backdrop with solid objects

I am trying to achieve a unique design where the body has an image background, and the main div has a semitransparent background. I want the image to be visible through the main div, but in a shaded manner. However, the traditional approach may cause every ...

Erase embedded frame from a Google Sheets document

Is there a way for me to customize the frame and replace it with my own design? Click here to view the Google Sheet embedded frame ...

Find a way to avoid Google's site-blocking measures

Currently developing a website. I am looking into restricting access to only logged-in users on the site. How can I parse the pages in a way that Google does not block the site? ...

Difficulty with spacing in HTML/CSS styling

Here is what I'm currently working on: link to jsfiddle code * { margin: 0; padding: 0; } html { height: 100%; } header, nav, section, article, aside, footer { display: block; } body { font: 12px/18px Arial, Tahoma, Verdana, sans- ...

Assign the value of the selected option to the ng-model instead of the displayed text

When creating a new user, I am collecting user input. Users have the option to select their state from a dropdown menu. I am looking to save the state ID instead of the state name when the user makes a selection. How can I assign the state ID to the newSit ...

React.js onClick does not display the dropdown

Hello, I have a question regarding my navbar icon functionality. When I click on the icon, it is supposed to open a dropdown menu. However, although the div name changes when clicked, the CSS properties remain the same as the initial class. I am unsure w ...

The chaotic world of Android WebKit versions 2.x and 3.x

I have been working on an Android app and my goal is to make it compatible with Android versions 2.2 and above. Currently, due to issues with the WebView control, I am restricted to targeting Android 4.0 and higher. The app primarily uses HTML, CSS, Java ...

Move items between unordered lists with automatic saving

As someone who is new to javascripting and php, I am looking to create multiple lists where I can easily drag and drop items between them. The specific order of the items within each list is not crucial as I will be able to adjust it using SORT BY. While ...

Transferring arrays to Blade component in Laravel 8

I'm currently working on developing a custom x-select component where I need to be able to provide an array of options as one of the attributes. Below is the code snippet from create.blade.php: <?php $list = ['Received', 'In Process ...

Data modifications in polymer are not being accurately displayed

I need help with hiding/unhiding a UI element using a button in Polymer. Despite having the necessary elements and code set up, it is not working as expected: <button id="runPredictionButton"> <i>Button text</i> </button> <p ...

Encountering a 500 Error following an upload in Laravel 5.4

I have a laravel 5.4 application that I uploaded to a shared hosting server and modified the .env file... However, I am encountering a persistent error 500 When checking the php error reporting, the server returns the following: Warning: require(/home/a ...

What is the reason for having a space between the <body> and the <html> tags?

Can you explain why there is a gap between the top of the green box and the browser window in Chrome and Firefox? I've tried various CSS configurations to eliminate the apparent space between the html and body elements, but it seems that some padding ...

The Laravel Ajax Request is Returning Null

I am faced with a perplexing issue involving a toggle button that should change the status (Show/Hide). Despite sending valid data via ajax and seeing correct data in the console, the request appears empty in the controller. I've made sure to include ...

I am encountering issues with setting a background image in Bootstrap 3.1.1 while trying to achieve a par

I'm struggling to add a background image to my bootstrap site. I'm attempting to create a parallax site using stellar.js, and while the site is functional with text on each slide and correct scrolling links, the images just won't load. Despi ...

Having trouble loading static CSS files in Django

Need help linking the main.css file in my index.html <link rel="stylesheet" href="{% static 'assets/css/main.css' %}"/> I have also included {%load static%} Here is my file structure: signup/static/assets/css/main.css In settings.py S ...

"Discover the steps to seamlessly integrating Snappuzzle with jQuery on your

I am a beginner when it comes to javascript and jquery, and I recently came across the snappuzzle plugin which caught my interest. After visiting snappuzzle plugin, I decided to download and link jQuery, jQuery UI, and the snappuzle.js in my HTML file. I a ...

What is the process for modifying a field type in Netsuite?

I'm exploring ways to build an online form within Netsuite. Our predefined fields include firstname, lastname, etc. Within these, we also have a NLSUBSCRIPTIONS tag, but it's currently set up as a drop-down with multiple select options. I ...