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:
- add a StyleSheet Extension (SSX) xobject (i.e. XWiki.StyleSheetExtension) to any wiki page of your choosing (you can create a new page just for this for example) - the style will be used wherever the style sheet extension is set to be used;
- add it in the advanced CSS (LESS) of your Flamingo color theme and it will apply for all the pages / content which use that color theme.
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.