Блог

Я пытаюсь создать тему для SMF, и таблицы — настоящая головная боль. У меня есть пример HTML-кода, подобный этому:

 <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>
  

И это CSS:

 #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}
  

При тестировании кода, если css не изменен на display:block, td сохраняет свое положение ячейки в таблице. Но если оно изменено на block, ячейки действуют как встроенный элемент! Я очень уверен, что делаю что-то не так.

p.s. Мне нужно создать блок для его стилизации, т. Е. Добавить закругленные границы.

JS Fiddle

Для начала вам нужно закрыть свои теги.

Во-вторых, поскольку вы меняете тип отображения в теле таблицы, что изменяет способ вычисления браузером ширины ячеек, вы могли бы попробовать задать ширину специально:

 tr {
    display:block;
    width:100%;
    clear:left;
}
td {
    float:left;
    width:25%;
    box-sizing:border-box;
}