Я создал таблицу, как описано в imaputz.com , но с чередующимися цветами для строк. Из-за этих цветов есть четкое различие в цвете строк и цвете, окружающем таблицу, и это заставляет таблицу выглядеть плохо, когда есть несколько строк, нуждающихся в полосе прокрутки, так как правый край tbody не выравнивается с правым краем thead (который также имеет цвет, отличный от окружающего фона).
Моя идея сейчас такова:
Если бы я мог как-то остановить боковую панель, чтобы она не влияла на расположение содержащих ее элементов (так, чтобы полоса прокрутки перекрывала некоторые из ее содержащих элементов, потенциально), я мог бы затем немного дополнить строки, чтобы убедиться, что полоса прокрутки никогда не перекрывает что-то важное. 1007 *
Есть ли способ добиться такого поведения полосы прокрутки, желательно без Javascript?
Пример:
<div id="list">
<table>
<thead>
<tr>
<th>
DATUM
</th>
<th>
TID
</th>
<th>
TEMPERATUR
</th>
<th>
STATUS
</th>
<th>
ÅTGÄRD
</th>
</tr>
</thead>
<tbody>
<tr class="odd row0">
<td>
2011 09 22
</td>
<td>
04:39
</td>
<td>
-264.2
</td>
<td>
</td>
<td>
Antibiotika behandling
</td>
</tr>
<tr class="even row1">
<td>
2011 09 22
</td>
<td>
04:36
</td>
<td>
-264.2
</td>
<td>
</td>
<td>
Under behandling
</td>
</tr>
<tr class="odd row2">
<td>
2011 09 21
</td>
<td>
19:29
</td>
<td>
-264.2
</td>
<td>
Förhöjd
</td>
<td>
</td>
</tr>
<tr class="even row3">
<td>
2011 09 21
</td>
<td>
19:29
</td>
<td>
-273.2
</td>
<td>
Förhöjd
</td>
<td>
</td>
</tr>
<tr class="odd row4">
<td>
2011 09 21
</td>
<td>
19:29
</td>
<td>
-270.2
</td>
<td>
Förhöjd
</td>
<td>
</td>
</tr>
<!-- Uncomment to get scrollbars
<tr class="even row5">
<td>
2011 09 21
</td>
<td>
19:29
</td>
<td>
-273.2
</td>
<td>
Förhöjd
</td>
<td>
</td>
</tr>
<tr class="odd row6">
<td>
2011 09 21
</td>
<td>
19:29
</td>
<td>
-270.2
</td>
<td>
Förhöjd
</td>
<td>
</td>
</tr>
<tr class="even row7">
<td>
2011 09 21
</td>
<td>
19:29
</td>
<td>
-273.2
</td>
<td>
Förhöjd
</td>
<td>
</td>
</tr>
<tr class="odd row8">
<td>
2011 09 21
</td>
<td>
19:28
</td>
<td>
-272.2
</td>
<td>
Förhöjd
</td>
<td>
</td>
</tr>
<tr class="even row9">
<td>
2011 09 21
</td>
<td>
19:28
</td>
<td>
-262.2
</td>
<td>
Förhöjd
</td>
<td>
</td>
</tr>
<tr class="odd row10">
<td>
2011 09 21
</td>
<td>
19:28
</td>
<td>
-268.2
</td>
<td>
Förhöjd
</td>
<td>
</td>
</tr>
<tr class="even row11">
<td>
2011 09 21
</td>
<td>
19:28
</td>
<td>
-273.2
</td>
<td>
Förhöjd
</td>
<td>
</td>
</tr>
<tr class="odd row12">
<td>
2011 09 21
</td>
<td>
19:28
</td>
<td>
-269.2
</td>
<td>
Förhöjd
</td>
<td>
</td>
</tr>
<tr class="even row13">
<td>
2011 09 21
</td>
<td>
19:27
</td>
<td>
-270.2
</td>
<td>
Förhöjd
</td>
<td>
</td>
</tr>
-->
</tbody>
<tfoot>
</tfoot>
</table>
</div>
Css:
#list {
width:60%;
float:left;
}
#list table {
font-weight:normal;
border-collapse:collapse;
text-align:center;
font-size:smaller;
}
#list table thead tr {
display:block;
position:relative;
}
#list table, #list th, #list td
{
border:1px solid white;
}
#list table tr td,
#list table tr th
{
width:65px;
}
#list table tr td + td,
#list table tr th + th
{
width:40px;
}
#list table tr td + td + td,
#list table tr th + th + th
{
width:100px;
}
#list table tr td + td + td + td,
#list table tr th + th + th + th
{
width:80px;
}
#list table tbody tr td + td + td + td + td
{
width:150px;
}
/* The last column header is a special case, to compensate for
the scrollbar's width, which would otherwise offset the
columns a bit to the left. */
#list table thead tr th + th + th + th + th
{
width:166px;
}
#list th {
background-color:#E5E5E5;
}
#list .odd
{
background-color:#E5E5E5;
}
#list .even
{
background-color:#CBCBCB;
}
#list table tbody {
display:block;
overflow:auto;
height:206px;
}
Пример стал немного большим, извините за это.