YUI Library Examples: DataTable Control (beta): Skinning Model

DataTable Control (beta): Skinning Model

This example demonstrates the CSS applied to an implementation of the DataTable control that uses the "Sam Skin". You can read more about the general approach to skinning YUI components in this in-depth article. Change any or all of the skin CSS (but not the core CSS) for a more customized look and feel.

id	date	quantity	amount	title

id	date	quantity	amount	title
po-0167	3/24/1980	1	$4.00	A Book About Nothing
po-0783	1/3/1983		$12.12	The Meaning of Life
po-0297	12/12/1978	12	$1.25	This Book Was Meant to Be Read Aloud
po-1482	3/11/1985	6	$3.50	Read Me Twice
Loading data...

Sample Code

DOM Overview:


1	<div class="yui-dt">
2	<div class="yui-dt-hd">
3	<table>
4	<caption>[caption]</caption>
5	<thead>
6	<tr class="yui-dt-first yui-dt-last">
7	<th class="yui-dt-resizeable yui-dt-sortable yui-dt-first yui-dt-hidden">
8	<div class="yui-dt-liner yui-dt-col-[key]">
9	<span class="yui-dt-label">
10	<a href="yui-dt0-sort0-ascending" title="Click to sort ascending" class="yui-dt-sortable">[label]</a>
11	</span>
12	<div class="yui-dt-resizer"></div>
13	</div>
14	</th>
15	...
16	<th class="yui-dt-resizeable yui-dt-sortable yui-dt-last">
17	<div class="yui-dt-liner yui-dt-col-[key]">
18	<span class="yui-dt-label">
19	<a href="yui-dt0-sort4-ascending" title="Click to sort ascending" class="yui-dt-sortable">[label]</a>
20	</span>
21	<div class="yui-dt-resizer"></div>
22	</div>
23	</th>
24	</tr>
25	</thead>
26	</table>
27	</div>
28	<div class="yui-dt-bd">
29	<table>
30	<thead>
31	<tr>
32	<th>
33	<div>
34	<span>[label]</span>
35	</div>
36	</th>
37	....
38	<th>
39	<div>
40	<span>[label]</span>
41	</div>
42	</th>
43	</tr>
44	</thead>
45	<tbody>
46	<tr class="yui-dt-even yui-dt-first yui-dt-selected">
47	<td class="yui-dt-first yui-dt-hidden">
48	<div class="yui-dt-liner yui-dt-col-[key] yui-dt-sortable yui-dt-resizeabl">
49	[data]
50	</div>
51	</td>
52	<td >
53	<div class="yui-dt-liner yui-dt-col-[key] yui-dt-sortable yui-dt-resizeabl">
54	[data]
55	</div>
56	</td>
57	<td>
58	<div class="yui-dt-liner yui-dt-col-[key] yui-dt-sortable yui-dt-resizeable">
59	[data]
60	</div>
61	</td>
62	<td>
63	<div class="yui-dt-liner yui-dt-col-[key] yui-dt-sortable yui-dt-resizeable">
64	[data]
65	</div>
66	</td>
67	<td class="yui-dt-last">
68	<div class="yui-dt-liner yui-dt-col-[key] yui-dt-sortable yui-dt-resizeable">
69	[data]
70	</div>
71	</td>
72	</tr>
73	...
74	<tr class="yui-dt-odd yui-dt-last">
75	<td class="yui-dt-first yui-dt-hidden">
76	<div class="yui-dt-liner yui-dt-col-[key] yui-dt-sortable yui-dt-resizeable">
77	[data]
78	</div>
79	</td>
80	<td>
81	<div class="yui-dt-liner yui-dt-col-[key] yui-dt-sortable yui-dt-resizeable">
82	[data]
83	</div>
84	</td>
85	<td>
86	<div class="yui-dt-liner yui-dt-col-[key] yui-dt-sortable yui-dt-resizeable">
87	[data]
88	</div>
89	</td>
90	<td>
91	<div class="yui-dt-liner yui-dt-col-[key] yui-dt-sortable yui-dt-resizeable">
92	[data]
93	</div>
94	</td>
95	<td class="yui-dt-last">
96	<div class="yui-dt-liner yui-dt-col-[key] yui-dt-sortable yui-dt-resizeable">
97	[data]
98	</div>
99	</td>
100	</tr>
101	</tbody>
102	<tbody>
103	<tr class="yui-dt-first yui-dt-last">
104	<td class="yui-dt-first yui-dt-last">
105	<div class="yui-dt-liner yui-dt-loading">
106	Loading data...
107	</div>
108	</td>
109	</tr>
110	</tbody>
111	</table>
112	</div>
113	</div>
	view plain \| print \| ?

<div class="yui-dt">
    <div class="yui-dt-hd">
        <table>
            <caption>[caption]</caption>
            <thead>
                <tr class="yui-dt-first yui-dt-last">
                    <th class="yui-dt-resizeable yui-dt-sortable yui-dt-first yui-dt-hidden">
                        <div class="yui-dt-liner yui-dt-col-[key]">
                            <span class="yui-dt-label">
                                <a href="yui-dt0-sort0-ascending" title="Click to sort ascending" class="yui-dt-sortable">[label]</a>
                            </span>
                            <div class="yui-dt-resizer"></div>
                        </div>
                    </th>
                    ...
                    <th class="yui-dt-resizeable yui-dt-sortable yui-dt-last">
                        <div class="yui-dt-liner yui-dt-col-[key]">
                            <span class="yui-dt-label">
                                <a href="yui-dt0-sort4-ascending" title="Click to sort ascending" class="yui-dt-sortable">[label]</a>
                            </span>
                            <div class="yui-dt-resizer"></div>
                        </div>
                    </th>
                </tr>
            </thead>
        </table>
    </div>
    <div class="yui-dt-bd">
        <table>
            <thead>
                <tr>
                    <th>
                        <div>
                            <span>[label]</span>
                        </div>
                    </th>
                    ....
                    <th>
                        <div>
                            <span>[label]</span>
                        </div>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr class="yui-dt-even yui-dt-first yui-dt-selected">
                    <td class="yui-dt-first yui-dt-hidden">
                        <div class="yui-dt-liner yui-dt-col-[key] yui-dt-sortable yui-dt-resizeabl">
                            [data]
                        </div>
                    </td>
                    <td >
                        <div class="yui-dt-liner yui-dt-col-[key] yui-dt-sortable yui-dt-resizeabl">
                            [data]
                        </div>
                    </td>
                    <td>
                        <div class="yui-dt-liner yui-dt-col-[key] yui-dt-sortable yui-dt-resizeable">
                            [data]
                        </div>
                    </td>
                    <td>
                        <div class="yui-dt-liner yui-dt-col-[key] yui-dt-sortable yui-dt-resizeable">
                            [data]
                        </div>
                    </td>
                    <td class="yui-dt-last">
                        <div class="yui-dt-liner yui-dt-col-[key] yui-dt-sortable yui-dt-resizeable">
                            [data]
                        </div>
                    </td>
                </tr>
                ...
                <tr class="yui-dt-odd yui-dt-last">
                    <td class="yui-dt-first yui-dt-hidden">
                        <div class="yui-dt-liner yui-dt-col-[key] yui-dt-sortable yui-dt-resizeable">
                            [data]
                        </div>
                    </td>
                    <td>
                        <div class="yui-dt-liner yui-dt-col-[key] yui-dt-sortable yui-dt-resizeable">
                            [data]
                        </div>
                    </td>
                    <td>
                        <div class="yui-dt-liner yui-dt-col-[key] yui-dt-sortable yui-dt-resizeable">
                            [data]
                        </div>
                    </td>
                    <td>
                        <div class="yui-dt-liner yui-dt-col-[key] yui-dt-sortable yui-dt-resizeable">
                            [data]
                        </div>
                    </td>
                    <td class="yui-dt-last">
                        <div class="yui-dt-liner yui-dt-col-[key] yui-dt-sortable yui-dt-resizeable">
                            [data]
                        </div>
                    </td>
                </tr>
            </tbody>
            <tbody>
                <tr class="yui-dt-first yui-dt-last">
                    <td class="yui-dt-first yui-dt-last">
                        <div class="yui-dt-liner yui-dt-loading">
                            Loading data...
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Core CSS:


1	/* foundational CSS */
2	.yui-dt {
3	border:1px solid transparent;
4	}
5
6	.yui-dt-noop {
7	border:none;
8	}
9
10	.yui-dt-liner {
11	overflow:hidden;
12	}
13
14	/* a11y headers */
15	.yui-dt-bd thead tr, .yui-dt-bd thead th {
16	position:absolute;
17	left:-1500px;
18	}
19
20	/* draggable columns */
21	.yui-dt-draggable {
22	cursor: move;
23	}
24	.yui-dt-coltarget {
25	position: absolute;
26	z-index: 999;
27	}
28
29	/* resizeable columns */
30	.yui-dt-hd {
31	zoom:1;
32	}
33	th.yui-dt-resizeable .yui-dt-liner {
34	position:relative;
35	}
36	.yui-dt-resizer {
37	position:absolute;
38	right:0;
39	bottom:0;
40	height:100%;
41	cursor:e-resize;
42	cursor:col-resize;
43	}
44	.yui-dt-resizerproxy {
45	visibility:hidden;
46	position:absolute;
47	z-index:9000;
48	}
49
50	/* hidden columns */
51	.yui-skin-sam th.yui-dt-hidden .yui-dt-liner,
52	.yui-skin-sam td.yui-dt-hidden .yui-dt-liner {
53	margin:0;
54	padding:0;
55	overflow:hidden;
56	white-space:nowrap;
57	}
58
59	/* vertical and horizontal scrolling */
60	.yui-dt-scrollable .yui-dt-bd {
61	overflow:auto;
62	}
63	.yui-dt-scrollable .yui-dt-hd {
64	overflow:hidden;
65	position:relative; /* for ie overflow bug http://rowanw.com/bugs/overflow_relative.htm */
66	}
67
68	/* editing */
69	.yui-dt-editor {
70	position:absolute;z-index:9000;
71	}
	view plain \| print \| ?

/* foundational CSS */
.yui-dt {
    border:1px solid transparent;
}

.yui-dt-noop {
    border:none;
}

.yui-dt-liner {
    overflow:hidden;
}

/* a11y headers */
.yui-dt-bd thead tr, .yui-dt-bd thead th {
    position:absolute;
    left:-1500px;
}

/* draggable columns */
.yui-dt-draggable {
    cursor: move;
}
.yui-dt-coltarget {
    position: absolute;
    z-index: 999;
}

/* resizeable columns */
.yui-dt-hd {
    zoom:1; 
}
th.yui-dt-resizeable .yui-dt-liner {
    position:relative;
}
.yui-dt-resizer {
    position:absolute;
    right:0;
    bottom:0;
    height:100%;
    cursor:e-resize;
    cursor:col-resize;
}
.yui-dt-resizerproxy {
    visibility:hidden;
    position:absolute;
    z-index:9000;
}

/* hidden columns */
.yui-skin-sam th.yui-dt-hidden .yui-dt-liner, 
.yui-skin-sam td.yui-dt-hidden .yui-dt-liner {
    margin:0;
    padding:0;
    overflow:hidden;
    white-space:nowrap;
}

/* vertical and horizontal scrolling */
.yui-dt-scrollable .yui-dt-bd {
    overflow:auto;
}
.yui-dt-scrollable .yui-dt-hd {
    overflow:hidden;
    position:relative; /* for ie overflow bug http://rowanw.com/bugs/overflow_relative.htm */
}

/* editing */
.yui-dt-editor {
    position:absolute;z-index:9000;
}

Skin CSS:


1	/* basic skin styles */
2	.yui-skin-sam .yui-dt table {margin:0;padding:0;font-family:arial;font-size:inherit;border-collapse:collapse;border-spacing:0;}
3	.yui-skin-sam .yui-dt thead {border-spacing:0;} /* for safari bug */
4	.yui-skin-sam .yui-dt caption {padding-bottom:1em;text-align:left;}
5
6	/outer border /
7	.yui-skin-sam .yui-dt-hd table {border-left:1px solid #7F7F7F;border-top:1px solid #7F7F7F;border-right:1px solid #7F7F7F;}
8	.yui-skin-sam .yui-dt-bd table {border-left:1px solid #7F7F7F;border-bottom:1px solid #7F7F7F;border-right:1px solid #7F7F7F;}
9
10	.yui-skin-sam .yui-dt-scrollable .yui-dt-hd table {border:0px;}
11	.yui-skin-sam .yui-dt-scrollable .yui-dt-bd table {border:0px;}
12	.yui-skin-sam .yui-dt-scrollable .yui-dt-hd {border-left:1px solid #7F7F7F;border-top:1px solid #7F7F7F;border-right:1px solid #7F7F7F;}
13	.yui-skin-sam .yui-dt-scrollable .yui-dt-bd {border-left:1px solid #7F7F7F;border-bottom:1px solid #7F7F7F;border-right:1px solid #7F7F7F;}
14
15	.yui-skin-sam .yui-dt th {
16	background:#D8D8DA url(../../../../assets/skins/sam/sprite.png) repeat-x 0 0; /* header gradient */
17	}
18	.yui-skin-sam .yui-dt th,
19	.yui-skin-sam .yui-dt th a {
20	font-weight:normal;text-decoration:none;color:#000; /* header text */
21	vertical-align:bottom;
22	}
23	.yui-skin-sam .yui-dt th {
24	margin:0;padding:0;
25	border:none;
26	border-right:1px solid #CBCBCB;/* inner column border */
27	}
28	.yui-skin-sam .yui-dt-liner {
29	margin:0;padding:0;
30	padding:4px 10px 4px 10px; /* cell padding */
31	}
32	.yui-skin-sam .yui-dt-coltarget {
33	width: 5px;
34	background-color: red;
35	}
36	.yui-skin-sam .yui-dt td {
37	margin:0;padding:0;
38	border:none;
39	border-right:1px solid #CBCBCB; /* inner column border */
40	text-align:left;
41	}
42	.yui-skin-sam .yui-dt-list td {
43	border-right:none; /* disable inner column border in list mode */
44	}
45	.yui-skin-sam .yui-dt-resizer {
46	width:6px;
47	}
48
49	/* messaging */
50	.yui-skin-sam .yui-dt-loading {
51	background-color:#FFF;
52	}
53	.yui-skin-sam .yui-dt-empty {
54	background-color:#FFF;
55	}
56	.yui-skin-sam .yui-dt-error {
57	background-color:#FFF;
58	}
59
60	/* sortable columns */
61	.yui-skin-sam thead .yui-dt-sortable {
62	cursor:pointer;
63	}
64	.yui-skin-sam th.yui-dt-asc,
65	.yui-skin-sam th.yui-dt-desc {
66	background:url(../../../../assets/skins/sam/sprite.png) repeat-x 0 -100px; /* sorted header gradient */
67	}
68	.yui-skin-sam th.yui-dt-sortable .yui-dt-label {
69	margin-right:10px;
70	}
71	.yui-skin-sam th.yui-dt-asc .yui-dt-liner {
72	background:url(dt-arrow-up.png) no-repeat right; /* sorted header gradient */
73	}
74	.yui-skin-sam th.yui-dt-desc .yui-dt-liner {
75	background:url(dt-arrow-dn.png) no-repeat right; /* sorted header gradient */
76	}
77
78	/* editing */
79	.yui-dt-editable {
80	cursor:pointer;
81	}
82	.yui-dt-editor {
83	text-align:left;
84	background-color:#F2F2F2;
85	border:1px solid #808080;
86	padding:6px;
87	}
88	.yui-dt-editor label {
89	padding-left:4px;padding-right:6px;
90	}
91	.yui-dt-editor .yui-dt-button {
92	padding-top:6px;text-align:right;
93	}
94	.yui-dt-editor .yui-dt-button button {
95	background:url(../../../../assets/skins/sam/sprite.png) repeat-x 0 0;
96	border:1px solid #999;
97	width:4em;height:1.8em;
98	margin-left:6px;
99	}
100	.yui-dt-editor .yui-dt-button button.yui-dt-default {
101	background:url(../../../../assets/skins/sam/sprite.png) repeat-x 0 -1400px;
102	background-color: #5584E0;
103	border:1px solid #304369;
104	color:#FFF
105	}
106	.yui-dt-editor .yui-dt-button button:hover {
107	background:url(../../../../assets/skins/sam/sprite.png) repeat-x 0 -1300px;
108	color:#000;
109	}
110	.yui-dt-editor .yui-dt-button button:active {
111	background:url(../../../../assets/skins/sam/sprite.png) repeat-x 0 -1700px;
112	color:#000;
113	}
114
115	/* striping */
116	.yui-skin-sam tr.yui-dt-even { background-color:#FFF; } /* white */
117	.yui-skin-sam tr.yui-dt-odd { background-color:#EDF5FF; } /* light blue */
118	.yui-skin-sam tr.yui-dt-even td.yui-dt-asc,
119	.yui-skin-sam tr.yui-dt-even td.yui-dt-desc { background-color:#EDF5FF; } /* light blue sorted */
120	.yui-skin-sam tr.yui-dt-odd td.yui-dt-asc,
121	.yui-skin-sam tr.yui-dt-odd td.yui-dt-desc { background-color:#DBEAFF; } /* dark blue sorted */
122
123	/* disable striping in list mode */
124	.yui-skin-sam .yui-dt-list tr.yui-dt-even { background-color:#FFF; } /* white */
125	.yui-skin-sam .yui-dt-list tr.yui-dt-odd { background-color:#FFF; } /* white */
126	.yui-skin-sam .yui-dt-list tr.yui-dt-even td.yui-dt-asc,
127	.yui-skin-sam .yui-dt-list tr.yui-dt-even td.yui-dt-desc { background-color:#EDF5FF; } /* light blue sorted */
128	.yui-skin-sam .yui-dt-list tr.yui-dt-odd td.yui-dt-asc,
129	.yui-skin-sam .yui-dt-list tr.yui-dt-odd td.yui-dt-desc { background-color:#EDF5FF; } /* light blue sorted */
130
131	/* highlighting */
132	.yui-skin-sam th.yui-dt-highlighted,
133	.yui-skin-sam th.yui-dt-highlighted a {
134	background-color:#B2D2FF; /* med blue hover */
135	}
136	.yui-skin-sam tr.yui-dt-highlighted,
137	.yui-skin-sam tr.yui-dt-highlighted td.yui-dt-asc,
138	.yui-skin-sam tr.yui-dt-highlighted td.yui-dt-desc,
139	.yui-skin-sam tr.yui-dt-even td.yui-dt-highlighted,
140	.yui-skin-sam tr.yui-dt-odd td.yui-dt-highlighted {
141	cursor:pointer;
142	background-color:#B2D2FF; /* med blue hover */
143	}
144
145	/* enable highlighting in list mode */
146	.yui-skin-sam .yui-dt-list th.yui-dt-highlighted,
147	.yui-skin-sam .yui-dt-list th.yui-dt-highlighted a {
148	background-color:#B2D2FF; /* med blue hover */
149	}
150	.yui-skin-sam .yui-dt-list tr.yui-dt-highlighted,
151	.yui-skin-sam .yui-dt-list tr.yui-dt-highlighted td.yui-dt-asc,
152	.yui-skin-sam .yui-dt-list tr.yui-dt-highlighted td.yui-dt-desc,
153	.yui-skin-sam .yui-dt-list tr.yui-dt-even td.yui-dt-highlighted,
154	.yui-skin-sam .yui-dt-list tr.yui-dt-odd td.yui-dt-highlighted {
155	cursor:pointer;
156	background-color:#B2D2FF; /* med blue hover */
157	}
158
159	/* selection */
160	.yui-skin-sam th.yui-dt-selected,
161	.yui-skin-sam th.yui-dt-selected a {
162	background-color:#446CD7; /* bright blue selected cell */
163	}
164	.yui-skin-sam tr.yui-dt-selected td,
165	.yui-skin-sam tr.yui-dt-selected td.yui-dt-asc,
166	.yui-skin-sam tr.yui-dt-selected td.yui-dt-desc {
167	background-color:#426FD9; /* bright blue selected row */
168	color:#FFF;
169	}
170	.yui-skin-sam tr.yui-dt-even td.yui-dt-selected,
171	.yui-skin-sam tr.yui-dt-odd td.yui-dt-selected {
172	background-color:#446CD7; /* bright blue selected cell */
173	color:#FFF;
174	}
175
176	/* enable selection in list mode */
177	.yui-skin-sam .yui-dt-list th.yui-dt-selected,
178	.yui-skin-sam .yui-dt-list th.yui-dt-selected a {
179	background-color:#446CD7; /* bright blue selected cell */
180	}
181	.yui-skin-sam .yui-dt-list tr.yui-dt-selected td,
182	.yui-skin-sam .yui-dt-list tr.yui-dt-selected td.yui-dt-asc,
183	.yui-skin-sam .yui-dt-list tr.yui-dt-selected td.yui-dt-desc {
184	background-color:#426FD9; /* bright blue selected row */
185	color:#FFF;
186	}
187	.yui-skin-sam .yui-dt-list tr.yui-dt-even td.yui-dt-selected,
188	.yui-skin-sam .yui-dt-list tr.yui-dt-odd td.yui-dt-selected {
189	background-color:#446CD7; /* bright blue selected cell */
190	color:#FFF;
191	}
192
193	/* pagination */
194	.yui-skin-sam .yui-pg-container,
195	.yui-skin-sam .yui-dt-paginator {
196	display:block;margin:6px 0;white-space:nowrap;
197	}
198	.yui-skin-sam .yui-pg-first,
199	.yui-skin-sam .yui-pg-last,
200	.yui-skin-sam .yui-pg-current-page,
201	.yui-skin-sam .yui-dt-first,
202	.yui-skin-sam .yui-dt-paginator .yui-dt-last,
203	.yui-skin-sam .yui-dt-paginator .yui-dt-selected {
204	padding:2px 6px;
205	}
206	.yui-skin-sam a.yui-pg-first,
207	.yui-skin-sam a.yui-pg-previous,
208	.yui-skin-sam a.yui-pg-next,
209	.yui-skin-sam a.yui-pg-last,
210	.yui-skin-sam a.yui-pg-page,
211	.yui-skin-sam .yui-dt-paginator a.yui-dt-first,
212	.yui-skin-sam .yui-dt-paginator a.yui-dt-last {
213	text-decoration:none;
214	}
215	.yui-skin-sam .yui-dt-paginator .yui-dt-previous,
216	.yui-skin-sam .yui-dt-paginator .yui-dt-next {
217	display:none;
218	}
219	.yui-skin-sam a.yui-pg-page,
220	.yui-skin-sam a.yui-dt-page {
221	border:1px solid #CBCBCB;
222	padding:2px 6px;
223	text-decoration:none;
224	background-color:#fff
225	}
226	.yui-skin-sam .yui-pg-current-page,
227	.yui-skin-sam .yui-dt-selected {
228	border:1px solid #fff;
229	background-color:#fff;
230	}
231	.yui-skin-sam .yui-pg-pages {
232	margin-left:1ex;
233	margin-right:1ex;
234	}
235	.yui-skin-sam .yui-pg-page {
236	margin-right:1px;
237	margin-left:1px;
238	}
239	.yui-skin-sam .yui-pg-first,
240	.yui-skin-sam .yui-pg-previous {
241	margin-right:3px;
242	}
243	.yui-skin-sam .yui-pg-next,
244	.yui-skin-sam .yui-pg-last {
245	margin-left:3px;
246	}
247	.yui-skin-sam .yui-pg-current,
248	.yui-skin-sam .yui-pg-rpp-options {
249	margin-right:1em;
250	margin-left:1em;
251	}
	view plain \| print \| ?

/* basic skin styles */
.yui-skin-sam .yui-dt table {margin:0;padding:0;font-family:arial;font-size:inherit;border-collapse:collapse;border-spacing:0;}
.yui-skin-sam .yui-dt thead {border-spacing:0;} /* for safari bug */
.yui-skin-sam .yui-dt caption {padding-bottom:1em;text-align:left;}

/*outer border */
.yui-skin-sam .yui-dt-hd table {border-left:1px solid #7F7F7F;border-top:1px solid #7F7F7F;border-right:1px solid #7F7F7F;}
.yui-skin-sam .yui-dt-bd table {border-left:1px solid #7F7F7F;border-bottom:1px solid #7F7F7F;border-right:1px solid #7F7F7F;}

.yui-skin-sam .yui-dt-scrollable .yui-dt-hd table {border:0px;}
.yui-skin-sam .yui-dt-scrollable .yui-dt-bd table {border:0px;}
.yui-skin-sam .yui-dt-scrollable .yui-dt-hd {border-left:1px solid #7F7F7F;border-top:1px solid #7F7F7F;border-right:1px solid #7F7F7F;}
.yui-skin-sam .yui-dt-scrollable .yui-dt-bd {border-left:1px solid #7F7F7F;border-bottom:1px solid #7F7F7F;border-right:1px solid #7F7F7F;}

.yui-skin-sam .yui-dt th {
    background:#D8D8DA url(../../../../assets/skins/sam/sprite.png) repeat-x 0 0; /* header gradient */
}
.yui-skin-sam .yui-dt th,
.yui-skin-sam .yui-dt th a {
    font-weight:normal;text-decoration:none;color:#000; /* header text */
    vertical-align:bottom;
}
.yui-skin-sam .yui-dt th {
    margin:0;padding:0;
    border:none;
    border-right:1px solid #CBCBCB;/*  inner column border */
}
.yui-skin-sam .yui-dt-liner {
    margin:0;padding:0;
    padding:4px 10px 4px 10px; /* cell padding */
}
.yui-skin-sam .yui-dt-coltarget {
    width: 5px;
    background-color: red;
}
.yui-skin-sam .yui-dt td {
    margin:0;padding:0;
    border:none;
    border-right:1px solid #CBCBCB; /* inner column border */
    text-align:left;
}
.yui-skin-sam .yui-dt-list td {
    border-right:none; /* disable inner column border in list mode */
}
.yui-skin-sam .yui-dt-resizer {
    width:6px;
}

/* messaging */
.yui-skin-sam .yui-dt-loading {
    background-color:#FFF;
}
.yui-skin-sam .yui-dt-empty {
    background-color:#FFF;
}
.yui-skin-sam .yui-dt-error {
    background-color:#FFF;
}

/* sortable columns */
.yui-skin-sam thead .yui-dt-sortable {
    cursor:pointer;
}
.yui-skin-sam th.yui-dt-asc,
.yui-skin-sam th.yui-dt-desc {
    background:url(../../../../assets/skins/sam/sprite.png) repeat-x 0 -100px; /* sorted header gradient */
}
.yui-skin-sam th.yui-dt-sortable .yui-dt-label {
    margin-right:10px;
}
.yui-skin-sam th.yui-dt-asc .yui-dt-liner {
    background:url(dt-arrow-up.png) no-repeat right; /* sorted header gradient */
}
.yui-skin-sam th.yui-dt-desc .yui-dt-liner {
    background:url(dt-arrow-dn.png) no-repeat right; /* sorted header gradient */
}

/* editing */
.yui-dt-editable {
    cursor:pointer;
}
.yui-dt-editor {
    text-align:left;
    background-color:#F2F2F2;
    border:1px solid #808080;
    padding:6px;
}
.yui-dt-editor label {
    padding-left:4px;padding-right:6px;
}
.yui-dt-editor .yui-dt-button {
    padding-top:6px;text-align:right;
}
.yui-dt-editor .yui-dt-button button {
    background:url(../../../../assets/skins/sam/sprite.png) repeat-x 0 0;
    border:1px solid #999;
    width:4em;height:1.8em;
    margin-left:6px;
}
.yui-dt-editor .yui-dt-button button.yui-dt-default {
    background:url(../../../../assets/skins/sam/sprite.png) repeat-x 0 -1400px;
    background-color: #5584E0;
    border:1px solid #304369;
    color:#FFF
}
.yui-dt-editor .yui-dt-button button:hover {
    background:url(../../../../assets/skins/sam/sprite.png) repeat-x 0 -1300px;
    color:#000;
}
.yui-dt-editor .yui-dt-button button:active {
    background:url(../../../../assets/skins/sam/sprite.png) repeat-x 0 -1700px;
    color:#000;
}

/* striping */
.yui-skin-sam tr.yui-dt-even { background-color:#FFF; } /* white */
.yui-skin-sam tr.yui-dt-odd { background-color:#EDF5FF; } /* light blue */
.yui-skin-sam tr.yui-dt-even td.yui-dt-asc,
.yui-skin-sam tr.yui-dt-even td.yui-dt-desc { background-color:#EDF5FF; } /* light blue sorted */
.yui-skin-sam tr.yui-dt-odd td.yui-dt-asc,
.yui-skin-sam tr.yui-dt-odd td.yui-dt-desc { background-color:#DBEAFF; } /* dark blue sorted */

/* disable striping in list mode */
.yui-skin-sam .yui-dt-list tr.yui-dt-even { background-color:#FFF; } /* white */
.yui-skin-sam .yui-dt-list tr.yui-dt-odd { background-color:#FFF; } /* white */
.yui-skin-sam .yui-dt-list tr.yui-dt-even td.yui-dt-asc,
.yui-skin-sam .yui-dt-list tr.yui-dt-even td.yui-dt-desc { background-color:#EDF5FF; } /* light blue sorted */
.yui-skin-sam .yui-dt-list tr.yui-dt-odd td.yui-dt-asc,
.yui-skin-sam .yui-dt-list tr.yui-dt-odd td.yui-dt-desc { background-color:#EDF5FF; } /* light blue sorted */

/* highlighting */
.yui-skin-sam th.yui-dt-highlighted,
.yui-skin-sam th.yui-dt-highlighted a {
    background-color:#B2D2FF; /* med blue hover */
}
.yui-skin-sam tr.yui-dt-highlighted,
.yui-skin-sam tr.yui-dt-highlighted td.yui-dt-asc,
.yui-skin-sam tr.yui-dt-highlighted td.yui-dt-desc,
.yui-skin-sam tr.yui-dt-even td.yui-dt-highlighted,
.yui-skin-sam tr.yui-dt-odd td.yui-dt-highlighted {
    cursor:pointer;
    background-color:#B2D2FF; /* med blue hover */
}

/* enable highlighting in list mode */
.yui-skin-sam .yui-dt-list th.yui-dt-highlighted,
.yui-skin-sam .yui-dt-list th.yui-dt-highlighted a {
    background-color:#B2D2FF; /* med blue hover */
}
.yui-skin-sam .yui-dt-list tr.yui-dt-highlighted,
.yui-skin-sam .yui-dt-list tr.yui-dt-highlighted td.yui-dt-asc,
.yui-skin-sam .yui-dt-list tr.yui-dt-highlighted td.yui-dt-desc,
.yui-skin-sam .yui-dt-list tr.yui-dt-even td.yui-dt-highlighted,
.yui-skin-sam .yui-dt-list tr.yui-dt-odd td.yui-dt-highlighted {
    cursor:pointer;
    background-color:#B2D2FF; /* med blue  hover */
}

/* selection */
.yui-skin-sam th.yui-dt-selected,
.yui-skin-sam th.yui-dt-selected a {
    background-color:#446CD7; /* bright blue selected cell */
}
.yui-skin-sam tr.yui-dt-selected td,
.yui-skin-sam tr.yui-dt-selected td.yui-dt-asc,
.yui-skin-sam tr.yui-dt-selected td.yui-dt-desc {
    background-color:#426FD9; /* bright blue selected row */
    color:#FFF;
}
.yui-skin-sam tr.yui-dt-even td.yui-dt-selected,
.yui-skin-sam tr.yui-dt-odd td.yui-dt-selected {
    background-color:#446CD7; /* bright blue selected cell */
    color:#FFF;
}

/* enable selection in list mode */
.yui-skin-sam .yui-dt-list th.yui-dt-selected,
.yui-skin-sam .yui-dt-list th.yui-dt-selected a {
    background-color:#446CD7; /* bright blue selected cell */
}
.yui-skin-sam .yui-dt-list tr.yui-dt-selected td,
.yui-skin-sam .yui-dt-list tr.yui-dt-selected td.yui-dt-asc,
.yui-skin-sam .yui-dt-list tr.yui-dt-selected td.yui-dt-desc {
    background-color:#426FD9; /* bright blue selected row */
    color:#FFF;
}
.yui-skin-sam .yui-dt-list tr.yui-dt-even td.yui-dt-selected,
.yui-skin-sam .yui-dt-list tr.yui-dt-odd td.yui-dt-selected {
    background-color:#446CD7; /* bright blue selected cell */
    color:#FFF;
}

/* pagination */
.yui-skin-sam .yui-pg-container,
.yui-skin-sam .yui-dt-paginator {
    display:block;margin:6px 0;white-space:nowrap;
}
.yui-skin-sam .yui-pg-first,
.yui-skin-sam .yui-pg-last,
.yui-skin-sam .yui-pg-current-page,
.yui-skin-sam .yui-dt-first,
.yui-skin-sam .yui-dt-paginator .yui-dt-last,
.yui-skin-sam .yui-dt-paginator .yui-dt-selected {
    padding:2px 6px;
}
.yui-skin-sam a.yui-pg-first,
.yui-skin-sam a.yui-pg-previous,
.yui-skin-sam a.yui-pg-next,
.yui-skin-sam a.yui-pg-last,
.yui-skin-sam a.yui-pg-page,
.yui-skin-sam .yui-dt-paginator a.yui-dt-first,
.yui-skin-sam .yui-dt-paginator a.yui-dt-last {
    text-decoration:none;
}
.yui-skin-sam .yui-dt-paginator .yui-dt-previous,
.yui-skin-sam .yui-dt-paginator .yui-dt-next {
    display:none;
}
.yui-skin-sam a.yui-pg-page,
.yui-skin-sam a.yui-dt-page {
    border:1px solid #CBCBCB;
    padding:2px 6px;
    text-decoration:none;
    background-color:#fff
}
.yui-skin-sam .yui-pg-current-page,
.yui-skin-sam .yui-dt-selected {
    border:1px solid #fff;
    background-color:#fff;
}
.yui-skin-sam .yui-pg-pages {
    margin-left:1ex;
    margin-right:1ex;
}
.yui-skin-sam .yui-pg-page {
    margin-right:1px;
    margin-left:1px;
}
.yui-skin-sam .yui-pg-first,
.yui-skin-sam .yui-pg-previous {
    margin-right:3px;
}
.yui-skin-sam .yui-pg-next,
.yui-skin-sam .yui-pg-last {
    margin-left:3px;
}
.yui-skin-sam .yui-pg-current,
.yui-skin-sam .yui-pg-rpp-options {
    margin-right:1em;
    margin-left:1em;
}

YUI Library Examples: DataTable Control (beta): Skinning Model

Sample Code

DataTable Control (beta) Examples:

More DataTable Control (beta) Resources: