Сосредоточение вложенных отделений и дизайна заголовка таблицы

Я - новичок когда дело доходит до CSS, кто-либо может помочь мне с сосредоточением 3-уровневые отделения? Вещь - ширина, неизвестно, так как я использую %. Я уже попробовал край: автомобиль; , но не работал.

And am also facing another problem with table headers and footers. I've tried putting up a horizontal line with


code in the <thead> and <tbody> but they didn't appear the wait I want them to be. I am already lost, please help me.

Click here to view my current code on jsbin

<div style="overflow: auto; height: 100%;padding:1% 0% 0% 0.5%;margin:0 auto;border-bottom-left-radius:5px;border-bottom-right-radius:5px;background: #E0E0E0 !important;border: 1px solid #808080;">
<div style="width:45%;margin: 0 1.5%;float:left;">
    <div style="width: 100%;text-align: right !important;white-space: nowrap;">
        Select  
        
    </div>
    <div style="margin-top: 10px !important;margin-bottom: -100px !important;height: 220px;width: 100%;background: #BFBABA !important;border-radius: 5px;border: 4px solid #BFBABA" >
        <div class="taskhead" style="margin-bottom: -90px !important;padding: 5px;background-color: #ccffff;height: 200px;margin: auto;border-radius: 5px;border: 1px solid #808080;">
            <div style="margin: 0px auto!important;padding: 5px;height: 180px; background: #ffffff !important;border: 1px solid #808080;border-radius: 5px;">
                Name:
                <div id="er_users" style="width: 100%;overflow: scroll; overflow-x: hidden; height: 160px; background: #ffffff !important;">
                    <table id="uid" style="width: 100%;margin-left: 5px; float: right;">
                        <thead style="background-color: #e0e0e0">
</thead> <tbody> <tr class="odd"> <td>Name 1</td> </tr> <tr class="even"> <td>Name 1</td> </tr> <tr class="odd"> <td>Name 2</td> </tr> <tr class="even"> <td>Name 2</td> </tr> </tbody>
</table> </div> </div> </div> </div> </div> <div style="margin: 0 1.5%; background-color: #D6D2D2 !important;width:0.2%;height: 265px !important;float:left;"> 
</div> <div style="width:45%;margin: 0 1%;float:left;"> <div style="margin-top: 1%"></div> User <div style="margin-top: 10px !important;margin-bottom: -100px !important;height: 220px;width: 100%;background: #BFBABA !important;border-radius: 5px;border: 4px solid #BFBABA;" > <div style="margin-bottom: -100px !important;padding: 5px;background-color: #e6f0a3;height: 200px;border-radius: 5px;border: 1px solid #808080;"> <div style="margin: 0px auto!important;padding: 5px;height: 180px; background: #ffffff !important;border: 1px solid #808080;border-radius: 5px;"> Name: <div style="width: 100%; overflow: scroll; overflow-x: hidden; height: 160px; background: #ffffff !important;"> <table id="uid" style="width: 100%;margin-left: 5px; float: right;"> <thead style="background-color: #e0e0e0">
</thead> <tbody> <tr class="odd"> <td>Name 1</td> </tr> <tr class="even"> <td>Name 1</td> </tr> <tr class="odd"> <td>Name 2</td> </tr> <tr class="even"> <td>Name 2</td> </tr> </tbody>
</table> </div> </div> </div> </div> </div>

This is the way my table should look like

Click here to view the image

1
nl ja de
я нашел этот блог, говорящий о сосредоточении неизвестного размера, но даже этого didn' t добиваются цели.
добавлено автор Darth, источник
Это - самая близкая вещь I' ve, сделанный, чтобы подражать желаемой продукции. Как вы видите, дополнение на вершине больше, чем дополнение на основании, я don' t, почему, хотя I' набор ve дополнение к одному размеру
добавлено автор Darth, источник

1 ответы

Если вы увеличиваетесь вершину края ниже Пользователя к 15px , столы выравнивают вертикально.

For the horizontal rules, move tfoot up before tbody, and wrap hr with tr td

<thead><tr><td>
</td></tr></thead> <tr><td>
</td></tr>

Чтобы расширить стол к приложению отделение , добавить

height: 100%;

к стол .

Modified JSBin

0
добавлено
@Darth я попробовал также, но я can' t видят, как это могло быть сделано. Это кажется, все ряды, включая голову и ногу, должны быть той же самой высотой.
добавлено автор Olaf Dietsche, источник
@Darth Тогда необходимо разъясниться, что точно doesn' t работают, как вы ожидаете.
добавлено автор Olaf Dietsche, источник
@Darth можно сделать это, но тогда это doesn' t похожи на ваше изображение. Пожалуйста, см. обновленный ответ.
добавлено автор Olaf Dietsche, источник
@Darth Делает заключительную работу JSBin для вас?
добавлено автор Olaf Dietsche, источник
@Darth я наконец узнал то, что было неправильным с thead и tfoot , пожалуйста см. обновленный ответ и JSBin.
добавлено автор Olaf Dietsche, источник
@Darth scrollbar является от приложения отделением не стол , that' s, почему я приложил горизонтальные правила к отделению в первой попытке.
добавлено автор Olaf Dietsche, источник
@Darth Наконец, это должно работать, как вы ожидаете. См. обновленный ответ и JSBin.
добавлено автор Olaf Dietsche, источник
@Darth заключительное примечание, необходимо извлечь встроенные стили к отдельному CSS файлу, так как это легче прочитать и поддержать.
добавлено автор Olaf Dietsche, источник
that' s прекрасный. Спасибо за взятие вашего времени, помогая мне.
добавлено автор Darth, источник
Это сделало, но как я могу установить высоту <thead> и ? Скажите, что я хочу его 3 пкс? Подъем высота на стиле doesn' t изменяют его.
добавлено автор Darth, источник
спасибо, примет во внимание это.
добавлено автор Darth, источник
спасибо за вашу обширную поддержку, но тем не менее wasn' t помещенный параллельно с scrollbars.
добавлено автор Darth, источник
еще раз спасибо @Olaf Dietsche, но как насчет того, чтобы фиксировать горизонтальное правило в основании, выровненном с scrollbars точно так же, как тот на вершине?
добавлено автор Darth, источник
мое плохое. Как you' упомянутый ve, I' помещенные ve вершину границы: тело на 3 пкс #e0e0e0; основание границы: тело на 3 пкс #e0e0e0 на приложении отделение , но горизонтальные правила должно быть внутри и часть <стол> . I' ve пытался поместить его там, но не было никакого горизонтального показанного правила.
добавлено автор Darth, источник
благодарит занять время, чтобы ответить на мой вопрос @Olaf Dietsche, но печально ваше предлагаемое решение не то, которое я ищу.
добавлено автор Darth, источник
спасибо @Olaf Dietsche, попробует ваше решение.
добавлено автор Darth, источник
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)