I need CSS help

AresMUSH
1

Hello! I apologize if this is the wrong place to put this on. I’m having trouble with my tables. The generic tables you can make with markdown don’t have any bg color for the cells, only the header. When I go in and set a bg color via the CSS, it then makes it so that the striped-tables of things like the FS3 abilities page no longer are striped. And I can’t for the life of me figure out how to make it work.

The following is the CSS I have set.

/* Tables */ 

.table > thead > tr > th {
    border-bottom: 2px solid #1f1f1f;
}

.table > tbody > tr > th {
    border-top: 1px solid #1f1f1f;
    border-left: 1px solid #1f1f1f;
}

.table-striped {
    background: #404040;
}

.table-striped>tbody>tr {
    background-color: #404040;
}

.table-striped>tbody>tr:nth-of-type(odd) {
    background-color: #353535;
}

.table>tbody>tr>td {
    border-top: 1px solid #292929;
}

th {
    background-color: #2b2b2b;
    color: #d8d8d8;
    font-size: 16px;
}

td {
    border-bottom: 1px solid #292929;
    background-color: #353535;

}

.table>tr:nth-of-type(even) {
    background-color: #404040
}
1 Like
2

Perfectly fine to ask that here. I’m just a little confused about what your goal is. Do you want the tables to look different on wiki pages than everywhere else, or are you just using a dark theme and want to style all your tables, or…?

3

Faraday has good questions, but just working with what’s there your most immediate issue is probably that you’re giving background colours to both TDs and TRs – you’re not going to see any of the TR colour unless you create some weird spacing. If you want striping, you may want to stick to the TR colours for the non-head cells.

I’ve tried to boil down the CSS you pasted somewhat, but I’m taking the liberty of guessing you don’t want the tables that aren’t .table-striped to be striped. If you do, then you don’t want the tr:nth-of-type(odd) to only apply to .table-striped.


tr {
   background-color: #404040
}

th {
   background-color: #2b2b2b;
   color: #d8d8d8;
   font-size: 16px;
}

thead th {
   border-bottom: 2px solid #1f1f1f;
}

tbody th {
   border-top: 1px solid #1f1f1f;
   border-left: 1px solid #1f1f1f;
}

td {
   border-top: 1px solid #292929;
}

/* Striped Tables */

.table-striped tr:nth-of-type(odd) {
   background-color: #353535;
}

Remember that because CSS cascades, order and specificity often matter.

2 Likes
4

Ok, I’m not very good at explaining things, so let me share some screen shots to illustrate the problem I was trying to fix:

989×419

^ This is what the tables for the abilities look like. This is how I want ALL of my tables to look.

1417×549

^ This is how a table I made using markdown syntax (using | pipes to make the tables) looks. If I fix it so that that table actually has a background color on the cell, it breaks the striping and puts them to just a single color. This is how my code currently looks:

.table > thead >tr > th {
    border-bottom: 2px solid #1f1f1f;
}

.table > tbody > tr > th {
    border-top: 1px solid #1f1f1f
}

.table-striped {
    background: #404040;
}

.table-striped>tbody>tr:nth-of-type(odd) {
    background-color: #353535;
}

.table>tbody>tr>td {
    border-top: 1px solid #292929;
}

th {
    background-color: #2b2b2b;
    color: #d8d8d8;
    font-size: 16px;
}

td {
    border-bottom: 1px solid #292929;
}
1 Like
5

Okay, then what I gave above should work, just removing the .table-striped stipulation for the odd lines. So:

tr {
   background-color: #404040
}

tr:nth-of-type(odd) {
   background-color: #353535;
}

th {
   background-color: #2b2b2b;
   color: #d8d8d8;
   font-size: 16px;
}

thead th {
   border-bottom: 2px solid #1f1f1f;
}

tbody th {
   border-top: 1px solid #1f1f1f;
   border-left: 1px solid #1f1f1f;
}

td {
   border-top: 1px solid #292929;
}

That should make all tables that way, unless you have something else later and/or more specific in your css changing it. Also, I definitely recommend using variables for defining your colours – it helps to keep things consistent, and you can easily change a given shade everywhere at once, then.

1 Like
6

Thank you, it’s all fixed now.

1 Like
7

Glad @Ren got it sorted out for you.

The reason that was happening is because tables in Bootstrap by default are not striped. You have to add the “table-striped” class to the table to get the striped effect.

Unfortunately, the markdown parser used by Ares (redcarpet) doesn’t support adding custom classes to markdown tables. So your options are:

  1. Make all tables striped, using the CSS snippets given by Ren, or
  2. Use HTML instead of markdown in your wiki pages to make your table, and apply the table-striped class to it.