How to add borders to tables?

Last modified by Anca Luca on 2026/05/07 19:35

Global Level

The Flamingo skin (and some other skins) don't show vertical borders by default. If you want to change that, you need to add some extra CSS to your instance, which can be done in 2 ways:

The CSS you need to add is the following:

.main th, .main td, .wiki-table th, .wiki-table td { 
    border: 1px solid #E8E8E8; 
    padding: 3px 4px; 
} 

You could also decide to have some background colors for table headers by adding:

th { 
    background-color: #F3F3F3; 
    font-weight: 700; 
}

And if you don't want the table to take the full width you could add:

table { 
  width: auto; 
}

Table Level

It's also possible to say that you want border just for a specific table using the table-bordered CSS class. For example in XWiki Syntax 2.0+:

(%class="table-bordered"%)
|A|B| 
|C|D| 

And if you want a hover effect (you can combine it with borders too):

(%class="table-hover"%)
|A|B|
|C|D|

More generally all the Bootstrap styles can be used.

Get Connected