HTML and CSS Reference
In-Depth Information
•
In general, you can open an html file in a browser without using IIS. For example, you
could rename the
Index.cshtml
file in your Visual Studio project to
Index.html
and
simply open the file with Internet Explorer (or any browser) and the page would work
fine. However,
.htc
files are ignored if the page is not actually served up by a web server
such as IIS or Apache.
•
You may need to define the HTC content type on your web server. IIS and IIS Express both
support this by default but you may need to add this with Apache or other web servers.
.htc
file is typically referenced in a CSS file, the URL specified in the
behavior
attribute must be relative to the location of the html document that invoked the
style sheet. If you put the
.htc
file in the Content folder (with all the other style sheets),
you'll need to reference it with a relative path
~/Content/customBehavior.htc
.
To display tables you will use an open-source HTC that can be downloaded from this site:
•
Even though the
eXerCISe 7-2. SUppOrtING taBLeS
1.
download the latest .zip file from this site:
http://tanalin.com/en/projects/
display-table-htc
.
(The latest file as of this writing is display-table.htc_2011-
11-25.zip.) This file contains an uncompressed and a minimized version. Copy the
display-table.htc to the Content folder.
2.
Right-click the Content folder and select the Add ➤ Existing item links. Browse to
the Content folder and select the
display-table.htc
file. Click the Add button to
load the file.
3.
open the
Index.cshtml
and find the portion where the table is defined. Add
the code shown in bold from listing 7-1 to the existing style rules. This specifies
a vendor-prefixed version of the
display
attribute and invokes the
display-table.htc
component.
Listing 7-1.
Defining a new table
/* Setup a table for the content and sidebar */
#contentArea
{
display: table;
-dt-display: table;
behavior: url(Content/display-table.htc);
}
#mainContent
{
display: table-cell;
-dt-display: table-cell;
padding-right: 2px;
behavior: url(Content/display-table.htc);
}
