2016-08-17 2 views
3

у меня есть это тело и CSS для раздела #content:CSS таблица не изменит высоту

section#content { 
 
\t background-color: #ffffff; 
 
\t box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15) inset; 
 
\t color: #444; 
 
\t display: table-cell; 
 
\t padding: 7px 18px 21px; 
 
\t vertical-align: top; 
 
\t width: 617px; 
 
\t display: table-cell; 
 
\t vertical-align: top; 
 
} 
 
section#content .table { 
 
\t border-radius: 5px; 
 
\t border-top-left-radius: 0px; 
 
\t border-top-right-radius: 0px; 
 
\t background-clip: padding-box; 
 
\t border: 1px solid #d5d5d5; 
 
\t display: table; 
 
} 
 

 
section#content table.table { 
 
\t border-spacing: 0; 
 
\t width: 100%; 
 
} 
 

 
section#content table.table td { 
 
\t background-color: #f4f4f4; 
 
\t padding: 7px; 
 
\t text-align: left; 
 
\t vertical-align: middle; 
 
\t word-break: break-word; 
 
\t transition-property: background; 
 
\t transition-duration: 0.1s; 
 
\t transition-timing-function: linear; 
 
} 
 

 
section#content table.table tr:nth-child(even)>td { 
 
\t background-color: #ebebeb; 
 
} 
 

 
section#content table.table th { 
 
\t background-color: #ebebeb; 
 
\t border-bottom: 1px solid #d0d0d0; 
 
\t border-right: 1px solid #d0d0d0; 
 
\t background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); 
 
\t color: #444444; 
 
\t font-weight: normal; 
 
\t box-shadow: 0 0 0 1px #FFFFFF inset; 
 
} 
 

 
section#content .playerTableBackground { 
 
\t background-attachment: scroll, scroll, fixed; 
 
    background-image: url("pageBG.jpg"); 
 
    background-position: center top, center bottom, center top; 
 
    background-repeat: repeat-x, repeat-x, repeat-x; 
 
    background-size: auto auto, auto auto, cover; 
 
}
<body style="background: none"> 
 
\t <section id="content"> 
 
\t \t <noscript> 
 
\t \t \t <div class="messagebox error"> 
 
\t \t \t \t In deinem Webbrowser ist JavaScript deaktiviert.<br />Um das 
 
\t \t \t \t Ticketsystem nutzen zu können, muss JavaScript aktiviert sein. 
 
\t \t \t \t Andernfalls ist beispielsweise das Antworten auf Tickets nicht 
 
\t \t \t \t möglich. 
 
\t \t \t </div> 
 
\t \t </noscript> 
 

 
\t \t <div class="playerTableBackground"> 
 
\t \t \t <table id="playerTable" class="table" style="opacity: 0.9;"> 
 
\t \t \t \t <thead> 
 
\t \t \t \t \t <tr> 
 
\t \t \t \t \t \t <th>Name</th> 
 
\t \t \t \t \t \t <th>Sozialer Status</th> 
 
\t \t \t \t \t \t <th>Spielzeit</th> 
 
\t \t \t \t \t \t <th>Telefon</th> 
 
\t \t \t \t \t \t <th>Fraktion</th> 
 
\t \t \t \t \t \t <th>Freundschaft</th> 
 
\t \t \t \t \t \t <th>Ping</th> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t </thead> 
 
\t \t \t \t <tbody class="playerTableBody"> 
 
\t \t \t </table> 
 
\t \t </div> 
 
\t </section> 
 

 
</body>

я могу изменить только высоту DIV, но ни один стол или TBODY. У вас есть решения?

+0

Ваш CSS не пытается установить высоту ничего –

+0

Что вы пытаетесь сделать это не работает? Я не знаю, каков ваш вопрос. – j08691

+0

Обычно высота не работает над элементом до его назначения. – coderodour

ответ

1

Я понимаю, что вам нужно иметь TBODY иметь определенную высоту, как данные поступают динамически. Так что мое предложение к вам это:

  1. Первоначально показать «данные не доступны» tr согласно ниже.

  2. Когда данные готовы к показу пользователю, отметьте его как display: none и покажите данные внутри tbody.

Надеюсь, это поможет. Дайте мне знать ваши отзывы. Благодаря!

section#content { 
 
\t background-color: #ffffff; 
 
\t box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15) inset; 
 
\t color: #444; 
 
\t display: table-cell; 
 
\t padding: 7px 18px 21px; 
 
\t vertical-align: top; 
 
\t width: 617px; 
 
\t display: table-cell; 
 
\t vertical-align: top; 
 
} 
 
section#content .table { 
 
\t border-radius: 5px; 
 
\t border-top-left-radius: 0px; 
 
\t border-top-right-radius: 0px; 
 
\t background-clip: padding-box; 
 
\t border: 1px solid #d5d5d5; 
 
\t display: table; 
 
} 
 

 
section#content table.table { 
 
\t border-spacing: 0; 
 
\t width: 100%; 
 
} 
 

 
section#content table.table td { 
 
\t background-color: #f4f4f4; 
 
\t padding: 7px; 
 
\t text-align: left; 
 
\t vertical-align: middle; 
 
\t word-break: break-word; 
 
\t transition-property: background; 
 
\t transition-duration: 0.1s; 
 
\t transition-timing-function: linear; 
 
} 
 

 
section#content table.table tr:nth-child(even)>td { 
 
\t background-color: #ebebeb; 
 
} 
 

 
section#content table.table th { 
 
\t background-color: #ebebeb; 
 
\t border-bottom: 1px solid #d0d0d0; 
 
\t border-right: 1px solid #d0d0d0; 
 
\t background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); 
 
\t color: #444444; 
 
\t font-weight: normal; 
 
\t box-shadow: 0 0 0 1px #FFFFFF inset; 
 
} 
 

 
section#content .playerTableBackground { 
 
\t background-attachment: scroll, scroll, fixed; 
 
    background-image: url("pageBG.jpg"); 
 
    background-position: center top, center bottom, center top; 
 
    background-repeat: repeat-x, repeat-x, repeat-x; 
 
    background-size: auto auto, auto auto, cover; 
 
} 
 

 
section#content table.table td.empty{ 
 
    height: 200px; 
 
    text-align:center; 
 
}
<body style="background: none"> 
 
\t <section id="content"> 
 
\t \t <noscript> 
 
\t \t \t <div class="messagebox error"> 
 
\t \t \t \t In deinem Webbrowser ist JavaScript deaktiviert.<br />Um das 
 
\t \t \t \t Ticketsystem nutzen zu können, muss JavaScript aktiviert sein. 
 
\t \t \t \t Andernfalls ist beispielsweise das Antworten auf Tickets nicht 
 
\t \t \t \t möglich. 
 
\t \t \t </div> 
 
\t \t </noscript> 
 

 
\t \t <div class="playerTableBackground"> 
 
\t \t \t <table id="playerTable" class="table" style="opacity: 0.9;"> 
 
\t \t \t \t <thead> 
 
\t \t \t \t \t <tr> 
 
\t \t \t \t \t \t <th>Name</th> 
 
\t \t \t \t \t \t <th>Sozialer Status</th> 
 
\t \t \t \t \t \t <th>Spielzeit</th> 
 
\t \t \t \t \t \t <th>Telefon</th> 
 
\t \t \t \t \t \t <th>Fraktion</th> 
 
\t \t \t \t \t \t <th>Freundschaft</th> 
 
\t \t \t \t \t \t <th>Ping</th> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t </thead> 
 
\t \t \t \t <tbody class="playerTableBody"> 
 
        <tr> 
 
        <td class="empty" colspan="7">No data available!</td> 
 
        </tr> 
 
       </tbody> 
 
\t \t \t </table> 
 
\t \t </div> 
 
\t </section> 
 

 
</body>

+1

Спасибо! Это работает наконец :) – Jonas

1

Столы специальные. Установка высоты таблицы не определена в спецификации. Просто установите высоту на TH.

https://www.w3.org/TR/CSS2/tables.html#height-layout

17.5.3 алгоритмы высота стола

Высота таблицы задается свойством «высоты» для «таблицы» или «элемента инлайн-таблицы». Значение «auto» означает, что высота представляет собой сумму высот строк плюс расстояние между ячейками или границы. Любое другое значение рассматривается как минимальная высота. CSS 2.1 не определяет, как распределяется лишнее пространство, когда свойство «высота» приводит к тому, что таблица будет выше, чем в противном случае.

section#content { 
 
\t background-color: #ffffff; 
 
\t box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15) inset; 
 
\t color: #444; 
 
\t display: table-cell; 
 
\t padding: 7px 18px 21px; 
 
\t vertical-align: top; 
 
\t width: 617px; 
 
\t display: table-cell; 
 
\t vertical-align: top; 
 
} 
 
section#content .table { 
 
\t border-radius: 5px; 
 
\t border-top-left-radius: 0px; 
 
\t border-top-right-radius: 0px; 
 
\t background-clip: padding-box; 
 
\t border: 1px solid #d5d5d5; 
 
\t display: table; 
 
} 
 

 
section#content table.table { 
 
\t border-spacing: 0; 
 
\t width: 100%; 
 
} 
 

 
section#content table.table td { 
 
\t background-color: #f4f4f4; 
 
\t padding: 7px; 
 
\t text-align: left; 
 
\t vertical-align: middle; 
 
\t word-break: break-word; 
 
\t transition-property: background; 
 
\t transition-duration: 0.1s; 
 
\t transition-timing-function: linear; 
 
} 
 

 
section#content table.table tr:nth-child(even)>td { 
 
\t background-color: #ebebeb; 
 
} 
 

 
section#content table.table th { 
 
\t height: 45px; 
 
\t background-color: #ebebeb; 
 
\t border-bottom: 1px solid #d0d0d0; 
 
\t border-right: 1px solid #d0d0d0; 
 
\t background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); 
 
\t color: #444444; 
 
\t font-weight: normal; 
 
\t box-shadow: 0 0 0 1px #FFFFFF inset; 
 
} 
 

 
section#content .playerTableBackground { 
 
\t background-attachment: scroll, scroll, fixed; 
 
    background-image: url("pageBG.jpg"); 
 
    background-position: center top, center bottom, center top; 
 
    background-repeat: repeat-x, repeat-x, repeat-x; 
 
    background-size: auto auto, auto auto, cover; 
 
}
<body style="background: none"> 
 
\t <section id="content"> 
 
\t \t <noscript> 
 
\t \t \t <div class="messagebox error"> 
 
\t \t \t \t In deinem Webbrowser ist JavaScript deaktiviert.<br />Um das 
 
\t \t \t \t Ticketsystem nutzen zu können, muss JavaScript aktiviert sein. 
 
\t \t \t \t Andernfalls ist beispielsweise das Antworten auf Tickets nicht 
 
\t \t \t \t möglich. 
 
\t \t \t </div> 
 
\t \t </noscript> 
 

 
\t \t <div class="playerTableBackground"> 
 
\t \t \t <table id="playerTable" class="table" style="opacity: 0.9;"> 
 
\t \t \t \t <thead> 
 
\t \t \t \t \t <tr> 
 
\t \t \t \t \t \t <th>Name</th> 
 
\t \t \t \t \t \t <th>Sozialer Status</th> 
 
\t \t \t \t \t \t <th>Spielzeit</th> 
 
\t \t \t \t \t \t <th>Telefon</th> 
 
\t \t \t \t \t \t <th>Fraktion</th> 
 
\t \t \t \t \t \t <th>Freundschaft</th> 
 
\t \t \t \t \t \t <th>Ping</th> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t </thead> 
 
\t \t \t \t <tbody class="playerTableBody"> 
 
\t \t \t </table> 
 
\t \t </div> 
 
\t </section> 
 

 
</body>

+0

Извините, но я хочу изменить высоту моего тела. Его пустые здесь, потому что данные выходите из jquery. Спасибо за помощь в совете! – Jonas

Смежные вопросы