how to have space between two specific columns in p:datatable

Question

I want some space between multiple columns of p:datatable .How can I achieve it without adding any extra blank column in between

Answer 1

A guess, I haven't tried it

.ui-datatable.padding-third-col tbody tr td:nth-child(3) {
    padding-right: 5px;
}

Give the datatable styleClass="padding-third-col".

Edit: sorry does'nt work for me either. I guess it depends on your theme/styling.

I would just make an extra column like

<p:column styleClass="hidden" style="width: 20px"></p:column>

with

.hidden {
    background-color: white;
}

For me, its not enough to give it visibility: hidden as the row's background shows. Also I need to reset all the borders with something like

table[role=grid], tr, td, th {
    border: none !important;
    border-collapse: separate;
}

Prefix with the table's styleClass if you like.

Answer 2

Try This Css

.ui-datatable tbody td {
    border-color: inherit;
    width: 48px;
    overflow: hidden;
    display: inline-block;
    white-space: nowrap;
}

Answer 3

Assuming your p:datatable elements are inside a

<div class="container"> <p:datatable class="data">... </div>

You could change the style of specific p:datatable by:

.container .data:nth-child(n+1){
  color:red;
}