Не получается нарисовать границы как надо

[7Lexus]

Прошу помочь сделать так, чтобы отрисовка границ таблицы была только в левой и правой ячейке, содержащих текст и картинку-ссылку для скачивания.

Ссылка на сам код jsbin.com/salezohu/1/edit?html,output

[Admin]

Так и не понял, что надо... Обвести ячейки с текстом и ссылками и при этом не обводить заголовок с годом? Хоть в Painte что ли нарисуйте.

[7Lexus]

(04.04.2014 19:55:31)Admin писал(а):  Так и не понял, что надо... Обвести ячейки с текстом и ссылками и при этом не обводить заголовок с годом? Хоть в Painte что ли нарисуйте.

Совершенно верно, уважаемый Главнокомандующий
Я так и думал, что вы поймете меня так как нужно.

[Admin]

Код:

.content table td { border: 1px solid black; }

Так?

[7Lexus]

Цитата:Так?

Ну да... так... только почему границы ячеек на стыке двоятся?

[Admin]

table { color: #000; font-size: 1em; width: 100%; border-collapse:collapse;}

[7Lexus]

Самое оно!
Всегда выручаете! Спасибо!

[7Lexus]

admshel.ru/regulatory/grad/
Вот что в итоге получилось
Спасибо ещё раз.

[7Lexus]

Здравствуйте ещё раз.
Все-таки не дает покоя идея привести решение, которое выше в более универсальный что ли вид.

Очень хочется иметь вот такую таблицу


Как вы уже поняли, заголовки должны раскрываться и закрываться в том месте, где плюс/минус.

Попытки сделать что-то подобное были вот тут admshel.ru/about/statistics/data и вот здесь admshel.ru/city/socs/heath/heath.php

Но в идеале хотелось бы некое универсальное решение, гибкое к изменениям (например, увеличение, уменьшение количества ветвлений).

Дело не срочное, но любопытно было бы посмотреть результат.
Пишу - потому что знаю, что вы всегда поможете, никогда не отказывали и всегда всё было качественно и красиво.

Спасибо заранее.

[Admin]

Вот кое-что накидал на скорую руку

Код:

<style type="text/css">
.header div {outline:1px solid black; padding:0 0 0 20px;}
.body {display:none;}
.body>table {width:100%;border-collapse: collapse;}
.body tr td {border: 1px solid black}
</style>

<div class="header">
    <div class="spoiler">Отчеты</div>
    <div class="body">
        <div class="spoiler">2014</div>
        <div class="body">
            <table>
            <tr><td>01.02.2014</td><td>За первый месяц</td><td>Скачать</td></tr>
            <tr><td>01.03.2014</td><td>За второй месяц</td><td>Скачать</td></tr>
            </table>
        </div>
        <div class="spoiler">2013</div>
        <div class="body">
            <table>
            <tr><td>01.02.2014</td><td>За первый месяц</td><td>Скачать</td></tr>
            <tr><td>01.03.2014</td><td>За второй месяц</td><td>Скачать</td></tr>
            </table>
        </div>
        <div class="spoiler">2012</div>
        <div class="body">
            <table>
            <tr><td>01.02.2014</td><td>За первый месяц</td><td>Скачать</td></tr>
            <tr><td>01.03.2014</td><td>За второй месяц</td><td>Скачать</td></tr>
            </table>
        </div>
    </div>


    <div class="spoiler">Планы мероприятий</div>
    <div class="body">
        <div class="spoiler">2014</div>
        <div class="body">
            <table>
            <tr><td>01.01.2014</td><td>На первый месяц</td><td>Скачать</td></tr>
            <tr><td>01.01.2014</td><td>На второй месяц</td><td>Скачать</td></tr>
            </table>
        </div>
        <div class="spoiler">2013</div>
        <div class="body">
            <table>
            <tr><td>01.01.2014</td><td>На первый месяц</td><td>Скачать</td></tr>
            <tr><td>01.01.2014</td><td>На второй месяц</td><td>Скачать</td></tr>
            </table>
        </div>
        <div class="spoiler">2012</div>
        <div class="body">
            <table>
            <tr><td>01.01.2014</td><td>На первый месяц</td><td>Скачать</td></tr>
            <tr><td>01.01.2014</td><td>На второй месяц</td><td>Скачать</td></tr>
            </table>
        </div>
    </div>


    <div class="spoiler">Презентации</div>
    <div class="body">
        <div class="spoiler">Хорошие</div>
        <div class="body">
            <div class="spoiler">2014</div>
            <div class="body">
                <table>
                <tr><td>03.02.2014</td><td>За первый месяц</td><td>Скачать</td></tr>
                <tr><td>03.03.2014</td><td>За второй месяц</td><td>Скачать</td></tr>
                </table>
            </div>
            <div class="spoiler">2013</div>
            <div class="body">
                <table>
                <tr><td>03.02.2014</td><td>За первый месяц</td><td>Скачать</td></tr>
                <tr><td>03.03.2014</td><td>За второй месяц</td><td>Скачать</td></tr>
                </table>
            </div>
        </div>

        <div class="spoiler">Так себе</div>
        <div class="body">
            <div class="spoiler">2014</div>
            <div class="body">
                <table>
                <tr><td>04.02.2014</td><td>За первый месяц</td><td>Скачать</td></tr>
                <tr><td>04.03.2014</td><td>За второй месяц</td><td>Скачать</td></tr>
                </table>
            </div>
            <div class="spoiler">2013</div>
            <div class="body">
                <table>
                <tr><td>04.02.2014</td><td>За первый месяц</td><td>Скачать</td></tr>
                <tr><td>04.03.2014</td><td>За второй месяц</td><td>Скачать</td></tr>
                </table>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    $('.spoiler').prepend('<img class="plus" src="image/plus.png"> ');
    $('.spoiler').click(function() {$(this).next().slideToggle(300);});
});
</script>

Конечно стоит еще поработать над CSS кодом, но пока главное чтобы все работало. Обратите внимание на последний пункт "Презентации", там специально попробовал увеличить глубину вложенности. Вроде работает.