I've been working on creating a theme for SMF, but I'm encountering some challenges with the tables. Here's an example of my HTML code:
<div id="wrapper">
<table class="table_list">
<tbody class="header">
<tr>
<td colspan="4">
<h3>TESTING</h3>
<td>
</tr>
</tbody>
<tbody class="content">
<tr class="window">
<td class="as">
<a href="">12</a>
<td>
<td class="bs">
<a href="">23</a>
<td>
<td class="cs">
<a href="">34</a>
<td>
<td class="ds">
<a href="">45</a>
<td>
</tr>
</tbody>
</table>
</div>
Here is the CSS associated with it:
#wrapper {
width:500px;
margin:0 auto;
}
*
{
margin: 0;
padding: 0;
border-spacing: 0px;
border-collapse: separate;
}
table.table_list {
background:#16A085;
width:100%;
}
tbody.header {background:#2980B9}
tbody.content {
display:block;
}
td.as {background:#E74C3C}
td.bs {background:#8E44AD}
td.cs {background:#E74C3C}
td.ds {background:#8E44AD}
I noticed that changing the display property to block in the CSS causes the cells to behave like inline elements instead of remaining in their cell positions within the table. I must be missing something here.
p.s. I need the display property set to block in order to style it and add rounded borders.