4

I'm trying to get all the columns and their headers to align:

But everything seems to have a mind of its own and I get this: enter image description here

The code I am using is pretty simple:

<DataTable
  :value="someValue"
  responsiveLayout="scroll"
  :scrollable="true"
  scrollDirection="both"
  class="p-datatable-lg"
  scrollHeight="500px"
>
<Column field="field1" header="Service"/>
</DataTable>

I've tried a host of things, namely setting the width of a column like so:

style="min-width:200px"

The current solution is to simple remove scrollDirection="both" which results in this: enter image description here

We want to prevent that word wrapping because it is hard to read.

But that also results in misaligned columns. Has anyone faced this issue and how did you resolve it?

Thank you!

Riza Khan
  • 2,712
  • 4
  • 18
  • 42
  • What about setting `td:nth-child(n) { width }` for all or change `table { display: grid }` (and then "some") with CSS? – s3c Mar 08 '23 at 11:41

0 Answers0