Title: Show only outer borders?
Last modified: May 3, 2023

---

# Show only outer borders?

 *  Resolved [Pieterjan Deneys](https://wordpress.org/support/users/nekojonez/)
 * (@nekojonez)
 * [3 years ago](https://wordpress.org/support/topic/show-only-outer-borders/)
 * You can remove the lines in between columns and rows… But is it possible to only
   have the lines on the outlines of the tables and not the inner lines?

Viewing 3 replies - 1 through 3 (of 3 total)

 *  Plugin Author [wpDataTables](https://wordpress.org/support/users/wpdatatables/)
 * (@wpdatatables)
 * [2 years, 12 months ago](https://wordpress.org/support/topic/show-only-outer-borders/#post-16726291)
 * Hello.
 * Our apologies for replying so late to your question.
 * You can use custom CSS to achieve this in our Lite version.
 * I am just not sure which table type are you using.
 * 1. If you use Simple Tables :
 * For example, first in the Simple Table’s back-end settings,
 * in the Display settings, check Remove borders, and if you use the first row as
   table header,
 * ![](https://i0.wp.com/ticksy_attachments.s3.amazonaws.com/9952072822.png?ssl=
   1)
 * Here is custom CSS you can add, either to the WP page, or in our main plugin 
   settings/Custom JS and CSS/Custom CSS :
 *     ```wp-block-code
       .wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable tr td:last-child {
           border-right: 1px solid black !important;
   
   
       }
       .wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable tr:first-child td:first-child {
           border-top: 1px solid black !important;
       }
       .wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable tr td:first-child {
           border-left: 1px solid black !important;
   
   
       }
       .wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable tr:first-child {
           border-top : 1px solid black !important
       }
       .wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable tr:last-child {
           border-bottom : 1px solid black !important
       }
       /* If you use first row as Headers */
       .wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable th:first-child {
           border-left: 1px solid black !important;
       }
       .wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable th:last-child {
           border-right: 1px solid black !important;
       }
       ```
   
 * This is how the Simple Table would look :
 * ​
 * ![](https://i0.wp.com/ticksy_attachments.s3.amazonaws.com/4574824001.png?ssl=
   1)
 * ​
 * If you do not use first row as Header, remove the last part of the CSS code under
   my comment “If you use first row as Headers”.
 * ​
 * Custom code needs to be applied to the page where the booking form is. Depending
   on what you’re using (Gutenberg blocks, or some page builder), adding the CSS
   or JS can be done in a few different ways. 
 * If you need help with adding custom CSS to the page, please take a look at [this article](https://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/).
 * 2. If you use other table type, that is not Simple Tables :
 *     ```wp-block-code
       .wpDataTablesWrapper table.wpDataTable > thead > tr > th{
           border-top: 2px solid blue !important;
       }
       .wpDataTablesWrapper table.wpDataTable > thead > tr > th:first-child{
           border-left : 2px solid blue !important;
       }
       .wpDataTablesWrapper table.wpDataTable > thead > tr > th:last-child{
           border-right : 2px solid blue !important;
       }
       .wpDataTablesWrapper table.wpDataTable > tbody > tr > td:first-child{
           border-left : 2px solid blue !important;
       }
       .wpDataTablesWrapper table.wpDataTable > tbody > tr > td:last-child{
           border-right : 2px solid blue !important;
       }
       .wpDataTablesWrapper table.wpDataTable > tbody > tr:first-child > td{
           border-top : 2px solid red !important;
       }
       .wpDataTablesWrapper table.wpDataTable > tbody > tr:last-child > td{
           border-bottom : 2px solid blue !important;
       }
       ```
   
 * It would look like this :
 * ![](https://i0.wp.com/ticksy_attachments.s3.amazonaws.com/1313691313.png?ssl=
   1)
 * We hope this helps. The Lite version does not have the built-in “Customize” options
   for borders in dataTables, so you would need to use Custom CSS like that.
 * Of course, you can change the border properties as needed, we used 2 pixel width
   and blue color,
 * but you can change it to anything you need. You can learn more about [CSS borders here](https://www.w3schools.com/css/css_border.asp)​.
 * Let us know if you have any additional questions.
   Thank you.
 *  Thread Starter [Pieterjan Deneys](https://wordpress.org/support/users/nekojonez/)
 * (@nekojonez)
 * [2 years, 12 months ago](https://wordpress.org/support/topic/show-only-outer-borders/#post-16726313)
 * Thanks a lot! I’ll implement this in a next update of my website 🙂
 *  Plugin Author [wpDataTables](https://wordpress.org/support/users/wpdatatables/)
 * (@wpdatatables)
 * [2 years, 12 months ago](https://wordpress.org/support/topic/show-only-outer-borders/#post-16726351)
 * Hello.
   You’re welcome, we are happy to help.Just one correction to the CSS we
   sent for other dataTable types that are not Simple Tables.Since we don’t have
   the Customize built-in options in the Lite Version,you also have to additionally
   remove the inner cell borders, with this :
 *     ```wp-block-code
       .wpDataTablesWrapper table.wpDataTable > tbody > tr > td {
       border : none;
       }
       ```
   
 * So, you can just add this at the top of all other CSS, because in CSS , if there
   is a property that is set later,
   it is overriding the “previous” lines.First 
   we will set the table to not have any cell borders,and later when you add the
   other lines where we tell it to set “right” , “bottom”, and “top” borders in 
   just some specific cells,it is going to work since the lines we add later will
   have higher priority.–This is how the full CSS would look ( for tables other 
   than Simple Tables) :
 *     ```wp-block-code
       .wpDataTablesWrapper table.wpDataTable > tbody > tr > td {
           border : none;
       }
   
       .wpDataTablesWrapper table.wpDataTable > thead > tr > th{
           border-top: 2px solid blue !important;
       }
   
       .wpDataTablesWrapper table.wpDataTable > thead > tr > th:first-child{
           border-left : 2px solid blue !important;
       }
   
       .wpDataTablesWrapper table.wpDataTable > thead > tr > th:last-child{
           border-right : 2px solid blue !important;
       }
   
   
       .wpDataTablesWrapper table.wpDataTable > tbody > tr > td:first-child{
           border-left : 2px solid blue !important;
       }
   
       .wpDataTablesWrapper table.wpDataTable > tbody > tr > td:last-child{
           border-right : 2px solid blue !important;
       }
   
       .wpDataTablesWrapper table.wpDataTable > tbody > tr:first-child > td{
           border-top : 2px solid red !important;
       }
       .wpDataTablesWrapper table.wpDataTable > tbody > tr:last-child > td{
           border-bottom : 2px solid blue !important;
       }
       ```
   
 * And a screenshot from our dummy table linked to CSV file, after applying it :
 * ![](https://i0.wp.com/ticksy_attachments.s3.amazonaws.com/8009956759.png?ssl=
   1)
 * Just wanted to add that correction for removing the “inner borders”.
   When you
   try this, please don’t hesitate to reach out to us if you encounter any issues.
   Thank you.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Show only outer borders?’ is closed to new replies.

 * ![](https://ps.w.org/wpdatatables/assets/icon-128x128.gif?rev=3010404)
 * [wpDataTables - WordPress Data Table, Dynamic Tables & Table Charts Plugin](https://wordpress.org/plugins/wpdatatables/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/wpdatatables/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/wpdatatables/)
 * [Active Topics](https://wordpress.org/support/plugin/wpdatatables/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/wpdatatables/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/wpdatatables/reviews/)

 * 3 replies
 * 2 participants
 * Last reply from: [wpDataTables](https://wordpress.org/support/users/wpdatatables/)
 * Last activity: [2 years, 12 months ago](https://wordpress.org/support/topic/show-only-outer-borders/#post-16726351)
 * Status: resolved