Remove All Borders on a Specific Datatable

Remove all borders on a specific datatable

Assuming a PrimeFaces 3.5 data table which is marked up as follows,

<p:dataTable ... styleClass="borderless">

then this style should do:

.ui-datatable.borderless thead th,
.ui-datatable.borderless tbody,
.ui-datatable.borderless tbody tr,
.ui-datatable.borderless tbody td {
    border-style: none;
}

DataTable: Remove all horizontal borders

You can use the following code to remove all the horizontal borders to just the even/odd shading:

datatable(mtcars[1:3,1:3], class = 'stripe')

Remove all border on all panelgrids not on datatables

Your CSS selectors are to 'broad'. They influence all <tr> and <td> tags that are descendants of a .ui-panelgrid, including all that are in a table that is in a panelgrid cell as descendants of the table that makes the datatable. So you have to make your selectors more specific (read about css specificity on mozdev) and have them only target a certain level .

Use e.g.

.ui-panelgrid > * > tr, .ui-panelgrid > * > tr > td.ui-panelgrid-cell {
     border: none;
}

This only targets <tr>'s that are a grandchild of a .ui-panelgrid and its direct <td> children.

If you don't want this applied to all panelgrids, You'll have to use the styleClass referred to in a comment above by @BhavinPanchani. But instead of explicitly adding borders by using a class, you prevent the css above to be applied.

.ui-panelgrid:not(.keepBorder) > * > tr, .ui-panelgrid:not(.keepBorder) > * > tr > td.ui-panelgrid-cell {
     border: none;
}

Just add the keepBorder class to the panelGrids that you want to keep the border. I did not test this last thing, but with a little testing you;

See also

• Can I write a CSS selector selecting elements NOT having a certain class?

Remove bottom border of DataTable

you can always use !important for your css to gain the most level of importance.
its needed and good to use specially when you are trying to override a plugin's css.
like:

table.dataTable.no-footer {
        border-bottom: 0 !important;
    }

of course if your css selector (table.dataTable.no-footer) is the right one!

this is the reference for how css processors specify selectors level of importance:

How is specificity calculated

Bootstrap table. How to remove all borders from table?

In this case you need to set the border below the table and the borders around - table header, table data, table container all to 0px in-order to totally get rid of all borders.

.table {    border-bottom:0px !important;}.table th, .table td {    border: 1px !important;}.fixed-table-container {    border:0px !important;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/><link href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script><script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<div class="row">    <div class="col-xs-1"></div>    <div class="col-xs-10">        <br/>        <table data-toggle="table" data-striped="true">            <thead>            <tr>                <th>Column 1</th>                <th>Column 2</th>            </tr>            </thead>            <tbody>            <tr>                <td>A</td>                <td>B</td>            </tr>            <tr>                <td>C</td>                <td>D</td>            </tr>            <tr>                <td>E</td>                <td>F</td>            </tr>            </tbody>        </table>    </div>        <div class="col-xs-1"></div>

Using CSS to style data table to remove borders and change data cell height?

I think these should work for you. :) I right-clicked on the table in Chrome and clicked "Inspect" to locate the styles you were trying to override.

table.v-table tbody td {
    height: 40px;
    border: none;
}
.theme--light.v-table tbody tr:not(:last-child) {
    border-bottom: none;
}

Removing border from table cells

Just collapse the table borders and remove the borders from table cells (td elements).

table {
    border: 1px solid #CCC;
    border-collapse: collapse;
}

td {
    border: none;
}

Without explicitly setting border-collapse cross-browser removal of table cell borders is not guaranteed.

---

Related Topics