Tables, table header problem
Hello! I tried using the following code:
<style>
table.darkTable {
font-family: "Arial Black",Gadget,sans-serif;
border: 2px solid #000000;
background-color: #4A4A4A;
width: 100%;
height: 200px;
text-align: center;
border-collapse: collapse;
}
table.darkTable td, table.darkTable th {
border: 1px solid #4A4A4A;
padding: 3px 2px;
}
table.darkTable tbody td {
font-size: 13px;
color: #E6E6E6;
}
table.darkTable tr:nth-child(even) {
background: #888888;
}
table.darkTable thead {
background: #000000;
border-bottom: 3px solid #000000;
}
table.darkTable thead th {
font-size: 15px;
font-weight: bold;
color: #E6E6E6;
text-align: center;
border-left: 2px solid #4A4A4A;
}
table.darkTable thead th:first-child {
border-left: none;
}
table.darkTable {
font-family: "Arial Black",Gadget,sans-serif;
border: 2px solid #000000;
background-color: #4A4A4A;
width: 100%;
height: 200px;
text-align: center;
border-collapse: collapse;
}
table.darkTable td, table.darkTable th {
border: 1px solid #4A4A4A;
padding: 3px 2px;
}
table.darkTable tbody td {
font-size: 13px;
color: #E6E6E6;
}
table.darkTable tr:nth-child(even) {
background: #888888;
}
table.darkTable thead {
background: #000000;
border-bottom: 3px solid #000000;
}
table.darkTable thead th {
font-size: 15px;
font-weight: bold;
color: #E6E6E6;
text-align: center;
border-left: 2px solid #4A4A4A;
}
table.darkTable thead th:first-child {
border-left: none;
}
table.darkTable tfoot {
font-size: 12px;
font-weight: bold;
color: #E6E6E6;
background: #000000;
background: -moz-linear-gradient(top, #404040 0%, #191919 66%, #000000 100%);
background: -webkit-linear-gradient(top, #404040 0%, #191919 66%, #000000 100%);
background: linear-gradient(to bottom, #404040 0%, #191919 66%, #000000 100%);
border-top: 1px solid #4A4A4A;
}
table.darkTable tfoot td {
font-size: 12px;
}
</style>
<table class="darkTable">
<thead>
<tr>
<th>head1</th>
<th>head2</th>
<th>head3</th>
<th>head4</th>
<th>head5</th>
<th>head6</th>
</tr>
</thead>
<tfoot>
<tr>
<td>foot1</td>
<td>foot2</td>
<td>foot3</td>
<td>foot4</td>
<td>foot5</td>
<td>foot6</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>cell1_1</td>
<td>cell2_1</td>
<td>cell3_1</td>
<td>cell4_1</td>
<td>cell5_1</td>
<td>cell6_1</td>
</tr>
<tr>
<td>cell1_2</td>
<td>cell2_2</td>
<td>cell3_2</td>
<td>cell4_2</td>
<td>cell5_2</td>
<td>cell6_2</td>
</tr>
<tr>
<td>cell1_3</td>
<td>cell2_3</td>
<td>cell3_3</td>
<td>cell4_3</td>
<td>cell5_3</td>
<td>cell6_3</td>
</tr>
<tr>
<td>cell1_4</td>
<td>cell2_4</td>
<td>cell3_4</td>
<td>cell4_4</td>
<td>cell5_4</td>
<td>cell6_4</td>
</tr>
<tr>
<td>cell1_5</td>
<td>cell2_5</td>
<td>cell3_5</td>
<td>cell4_5</td>
<td>cell5_5</td>
<td>cell6_5</td>
</tr>
</tbody>
</table>
font-size: 12px;
font-weight: bold;
color: #E6E6E6;
background: #000000;
background: -moz-linear-gradient(top, #404040 0%, #191919 66%, #000000 100%);
background: -webkit-linear-gradient(top, #404040 0%, #191919 66%, #000000 100%);
background: linear-gradient(to bottom, #404040 0%, #191919 66%, #000000 100%);
border-top: 1px solid #4A4A4A;
}
table.darkTable tfoot td {
font-size: 12px;
}
</style>
<table class="darkTable">
<thead>
<tr>
<th>head1</th>
<th>head2</th>
<th>head3</th>
<th>head4</th>
<th>head5</th>
<th>head6</th>
</tr>
</thead>
<tfoot>
<tr>
<td>foot1</td>
<td>foot2</td>
<td>foot3</td>
<td>foot4</td>
<td>foot5</td>
<td>foot6</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>cell1_1</td>
<td>cell2_1</td>
<td>cell3_1</td>
<td>cell4_1</td>
<td>cell5_1</td>
<td>cell6_1</td>
</tr>
<tr>
<td>cell1_2</td>
<td>cell2_2</td>
<td>cell3_2</td>
<td>cell4_2</td>
<td>cell5_2</td>
<td>cell6_2</td>
</tr>
<tr>
<td>cell1_3</td>
<td>cell2_3</td>
<td>cell3_3</td>
<td>cell4_3</td>
<td>cell5_3</td>
<td>cell6_3</td>
</tr>
<tr>
<td>cell1_4</td>
<td>cell2_4</td>
<td>cell3_4</td>
<td>cell4_4</td>
<td>cell5_4</td>
<td>cell6_4</td>
</tr>
<tr>
<td>cell1_5</td>
<td>cell2_5</td>
<td>cell3_5</td>
<td>cell4_5</td>
<td>cell5_5</td>
<td>cell6_5</td>
</tr>
</tbody>
</table>
in a raw html widget in wp bakery, and it is showing this:
when it should look like this
I tried multiple things, but the heading of the table does not want to change background, the table can't have a 0px border, and so on. What is going on with tables?
Comments
your custom code includes styles which control how the table looks. The theme and VC also have their styling for tables. We suggest pasting the styles to custom css and paste only the table html into the builder.
thanks