How to add borders to tables?
Last modified by Thomas Mortagne on 2023/10/10
Global Level
The Flamingo skin (and some other skins) don't show vertical borders by default. If you want to change that you can 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), with the following content:
.main th, .main td, .wiki-table th, .wiki-table td {
border: 1px solid #E8E8E8;
padding: 3px 4px;
}
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;
}
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;
}
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|
|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|
|A|B|
|C|D|
More generally all the Bootstrap styles can be used.
