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.

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

Answer 2

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

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