Struggling with table element formatting - CSS-Tricks

This topic is empty.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
September 14, 2014 at 2:26 pm #182995
johnwmcc
Participant
I’m working on a page created in PHP by the program PHP Generator.

It reads from a database, and formats the output in a table-like grid, with a complex main.css, which I can override with a user.css.

Sample ‘view source’ output from the grid for one row of the table looks like this:
```
    <tr class="pg-row" style="">
                    <td data-column-name="view" style="" class="data-operation"><a href="playlist_with_authors.php?operation=view&pk0=942" title="View" class="view-record-action"><i class="pg-icon-view-record"></i></a></td>
                    <td data-column-name="PlayID" style="" class="primary-key sortable">942</td>
                    <td data-column-name="Play" style="" class="sortable">Lady Windermere’s Fan</td>
                    <td data-column-name="Venue" style="" class="sortable">Main theatre</td>
                    <td data-column-name="Company" style="" class="sortable">Company of Ten</td>
                    <td data-column-name="Authors" style="" class="sortable">Oscar Wilde</td>
                    <td data-column-name="Performed" style="" class="sortable">Sep 2012</td>
            </tr>
```
The program’s author tells me that the main table cell entries are formatted in CSS with:
```
table.pgui-grid > tbody > tr > td {
  background-color: transparent;
  color: #555555;
  text-align: center;
}
```
and that I should use an entry in the user.css file to override this and make all the cells align left:
```
table.pgui-grid > tbody > tr > td {
  text-align: left;
}
```
That works.

Now I’m trying to format some of the columns with right aligned text. The author advises me to use an :nth-child(i) CSS entry to format the i-th column_.

But to what parent selector do I assign the n-th child selector?

And do the inline style=”” entries for both table row (tr) and cell (td) override any entries in the CSS files anyway?

I’ve tried:
```
table.pgui-grid > tbody > tr > td:nth-of-type(2) {
  text-align: right;
}
```
but this appears to have no effect. And I’m not quite clear what the > symbol (>) means here – is it ‘child of…’?

The test page is at http://mcclenahan.dyndns.org/playhistory/playlist_with_authors.php

I understand the basics of CSS, but find it hard to follow someone else large main.css file (around 7300 lines) to see what is relevant to this particular part of the page output.

Any help would be most welcomed – I’m feeling stuck at the moment.
September 14, 2014 at 2:33 pm #182998

johnwmcc
Participant

Well, I may have actually got it right after all! I had tried reloading the page after editing user.css but it didn’t seem to work (as noted in my original post).

But now reloading the page has made the second column right-aligned.

So I seem to have answered my own initial main question!

But some others now arise.

I will eventually have several pages (there are only two now) and the columns I want to affect are not always in the same sequential order.

Can I get separate parts of the CSS to apply only on one page? (it would be easy if I could put an in-line style sheet in the <head> section of the page, but I don’t think I can do that since that is generated automatically from the authors code)?

Or can I apply the alignment to a particular column by name, rather than position – there is some reference in the html source code to the column (database field) names, but I don’t think it constitutes a potential element for CSS selection, does it?

JMcC

September 14, 2014 at 3:14 pm #183011
__
Participant
can I apply the alignment to a particular column by name, rather than position …?

This is probably a more robust and straightforward approach. It looks like all of your tds have a data-column-name attribute that you could use.
```
[data-column-name=Authors]{
    /*  styles for "Authors" cells only  */
}
```
September 14, 2014 at 4:38 pm #183022
johnwmcc
Participant
Thank you for the suggestion.

I’ve tried that, and variants of it, but can’t seem to get it to work.

For example, I tried adding this to user.css:
```
[data-column-name=Authors] {
  color: red;
  text-align: right;
}
```
(I tried it with and without double quotes round “Authors”, suspecting that I only need the quotes if there’s a space in the attribute name).

It had no effect either way. And to check that the CSS file was reloading, I tried
```
table.pgui-grid > tbody > tr > td:nth-of-type(6) {
  color: red;
}
```
which took effect immediately I reloaded the page. So the CSS file is being re-read, but something’s still wrong with my syntax.

Since the other column I most want to change text alignment for is the last column, I can use nth-last-of-type for a more robust solution which will still work if I add additional middle columns.

But I’d really like to understand why the [data-column-name=…] isn’t working, and fix it if possible.

Any further thoughts?
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

The forum ‘CSS’ is closed to new topics and replies.