Compare Revisions

Tables

Revision 287559:

Revision 287559 by gregtyler on

Revision 345313:

Revision 345313 by Francis on

Title:
Tables
Tables
Slug:
Useful_CSS_tips/Tables
Useful_CSS_tips/Tables
Tags:
NeedsHelp, needsattention, "MDC Project"
"MDC Project","NeedsHelp","needsattention"
Content:

Revision 287559
Revision 345313
nn287    <div class="warning">
287    <p>288      <p>
288      If a table contain a lot of rows and the user has to scroll289        It is no longer possible to set the tbody's height and ov
> to see all the data, header rows can be lost as they are scrolle>erflow properties to create a fixed header table with scrollable 
>d past. However, you can fix the table to just scroll some of its>body. See {{ Bug(28800) }} for more information.
> content whilst anchoring some rows to the top or bottom. 
289    </p>290      </p>
290    <div class="note">
291      this code does not form part of the original page and it wa
>s added by the translator Fr 
t294      &nbsp;t293      Through Firefox 3.6 (Gecko 1.9.2) it is possible to make a 
 >tbody scrollable by setting its overflow property to auto and hav
 >ing a fixed height value. However this behavior is incorrect (acc
 >ording to the CSS2 specification) and was removed later.
295    </p>
296    <pre>
297&lt;style type="text/css"&gt;
298table {
299        width: 20em;                    /* esthetics */
300        border-collapse: separate;      /* by default */
301        border-spacing: 0;              /* workaround */
302}
303tbody {
304        height: 10em;                   /* define the height */
305        overflow-x: hidden;             /* esthetics */
306        overflow-y: auto;               /* allow scrolling cells 
>*/ 
307}
308td {
309        border-left: 1px solid blue;    /* workaround */
310        border-bottom: 1px solid blue;  /* workaround */
311}
312&lt;/style&gt;
313 
314&lt;table&gt;
315    &lt;thead&gt;&lt;tr&gt;&lt;th&gt;Header&lt;/th&gt;&lt;th&gt;H
>eader&lt;/th&gt;&lt;th&gt;Header&lt;/th&gt;&lt;/tr&gt;&lt;/thead& 
>gt; 
316    &lt;tfoot&gt;&lt;tr&gt;&lt;th&gt;Foot&lt;/th&gt;&lt;th&gt;Foo
>t&lt;/th&gt;&lt;th&gt;Foot&lt;/th&gt;&lt;/tr&gt;&lt;/tfoot&gt; 
317    &lt;tbody&gt;
318        &lt;tr&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&
>gt;&lt;td&gt;Cell&lt;/td&gt;&lt;/tr&gt; 
319        &lt;tr&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&
>gt;&lt;td&gt;Cell&lt;/td&gt;&lt;/tr&gt; 
320        &lt;tr&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&
>gt;&lt;td&gt;Cell&lt;/td&gt;&lt;/tr&gt; 
321        &lt;tr&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&
>gt;&lt;td&gt;Cell&lt;/td&gt;&lt;/tr&gt; 
322        &lt;tr&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&
>gt;&lt;td&gt;Cell&lt;/td&gt;&lt;/tr&gt; 
323        &lt;tr&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&
>gt;&lt;td&gt;Cell&lt;/td&gt;&lt;/tr&gt; 
324        &lt;tr&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&
>gt;&lt;td&gt;Cell&lt;/td&gt;&lt;/tr&gt; 
325        &lt;tr&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&
>gt;&lt;td&gt;Cell&lt;/td&gt;&lt;/tr&gt; 
326        &lt;tr&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&
>gt;&lt;td&gt;Cell&lt;/td&gt;&lt;/tr&gt; 
327        &lt;tr&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&
>gt;&lt;td&gt;Cell&lt;/td&gt;&lt;/tr&gt; 
328        &lt;tr&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&
>gt;&lt;td&gt;Cell&lt;/td&gt;&lt;/tr&gt; 
329        &lt;tr&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&
>gt;&lt;td&gt;Cell&lt;/td&gt;&lt;/tr&gt; 
330        &lt;tr&gt;&lt;td&gt;Cell&lt;/td&gt;&lt;td&gt;Cell&lt;/td&
>gt;&lt;td&gt;Cell&lt;/td&gt;&lt;/tr&gt; 
331    &lt;/tbody&gt;
332&lt;/table&gt;
333</pre>
334    <p>
335      &nbsp;Actually there is a problem with Firefox styling engi
>ne (see {{ Bug(135236) }}), which seems not to correctly render t 
>ables with <em>collapse border model</em> and TBODY with <em>over 
>flow: auto</em> style. I will ask DEVMO admins... 

Back to History