How to style Directory Listings with Apache Mod_autoindex using NameWidth & HTMLTable?

Question

I am trying to adjust NameWidth while using HTMLTable but without success.

Consider these settings (# = comment):

<IfModule mod_autoindex.c>
    IndexOptions FancyIndexing
    IndexOptions HTMLTable
    IndexOptions IconsAreLinks
    IndexOptions SuppressDescription
    IndexOptions SuppressLastModified
    IndexOptions SuppressColumnSorting
    #IndexOptions IconWidth=20
    #IndexOptions IconHeight=20
    IndexOptions NameWidth=*
    IndexOrderDefault Descending Name
    HeaderName header.html
    ReadmeName footer.html
</ifModule>

With the above settings, an in-browser directory listing reveals that the WIDTH of the Name column is hardly wider than the width of the longest filename. Filenames are not truncated, but the right edge of the longest filename is only 1 character away from the next column. I wish to make the Name column wider than the longest filename, so there is more whitespace separating the right side of the filenames with the next column to the right. I can accomplish that (add extra whitespace horizontally) by deleting or commenting-out "IndexOptions HTMLTable". But disabling "HTMLTable" causes the icons to no longer be vertically centered with their associated filenames. And yes, I wish to retain the icons. Changing IconWidth & IconHeight does not fix vertical centering issues. I used header.html and footer.html to add a page title and a return link, but those files don't affect the directory listing content.

How do I resolve this?

Thank you.

Casper

Are you had the solution for this? where is mod_autoindex.c file is located ? – Endsley

I have not found a solution, and as you can see, not a single person gave me the courtesy of a reply either. mod_autoindex.c is normally located in the modules directory of your Apache installation: /etc/httpd/modules/ – Casper

Answer 1

This can actually be done using only Apache directives. I'm very late answering this question, but I'm leaving this for future reference. This works for Apache v2.2+.

You can use CSS to style individual columns/elements using the IndexStyleSheet directive:

1. Add an IndexStyleSheet directive just before your HeaderName line e.g. IndexStyleSheet /url/to/css/index_body.css

2. In index_body.css, set your preferred column padding with padding-left and padding-right properties and include align properties to replace the default HTML align tags that will be automatically removed. th classes refer to the column header labels; td classes refer to the column contents; CSS class names are in the format indexcol<column name>:

    /**
     * Apache Auto-Index Style Sheet
     * Created 10/03/2019
     */
    /* Include padding to the right of the Name column */ 
    td.indexcolname {
      padding-right: 1em;
    }
    /* Preserve the default alignment for the Last Modified column */ 
    td.indexcollastmod {
      align: right;
    }
    /* Align the Size column header label and make the column wider */
    th.indexcolsize {
      padding-left: 3em;
      align: right;
    }
    /* Align the Size column values and make the column wider */
    td.indexcolsize {
      padding-left: 3em;
      align: right;
    }

3. Note: If your configuration includes the IndexOptions SuppressHTMLPreamble directive, the resulting Index page HTML will not automatically include a link to your IndexStyleSheet URL. You can manually add a link to your HeaderName file (header.html, for this question):

    <link href="/url/to/css/index_body.css" rel="stylesheet">

4. Some additional resources:

   Official Apache documentation for IndexStyleSheet

   A GitHub project that allows you to theme your index listings

Income

My web host provider does not allow me the access required to use Apache Directives, unfortunately. But thank you for making time to offer a detailed solution for people who do. – Casper

I wasn't really expecting a reply from you, as the original poster, after all of this time, but I'll help if I can. You seem (per the code snippet in the original question) to already have most of the directives in place, unless I am misunderstanding. Where did that config snippet come from? Apache directives can be placed in an .htaccess files in the directory you require the directory listing for. – Income

Thank you for your help, Jim. I was able to implement your advice today. It's working well. Your advice is a complete solution to my original problem. Many thanks for taking time to reply in spite of the age of my original post! – Casper

@Casper You're welcome. Please accept this answer, since it solved your issue. – Income

I neglected to click the checkmark yesterday. My apologies. You answer is now Accepted. Best wishes, Jim! – Casper

Answer 2

I have created using php with css3,html5 and some jquery libraries

https://github.com/gsivaprabu/xampp-lampp-wampp-custom-index-file

Endsley