We help IT Professionals succeed at work.

Formatting an HTML table with CSS

Horalia Rodriguez
on
Hello, I'm working on a CSS script to format a table. My challenge here is that the table in question is generated with a rule engine product, and the fastest way for me to place some formatting in the table is thru CSS. So far, I have only added a border to the table and added collapsible borders to the rows and columns. What I would like to do, is have the column's width adjust according to the content. Can this be done?

Thanks...
Comment
Watch Question

Commented:
In the CSS try setting "column-width: auto;"
Horalia RodriguezIT Developer

Author

Commented:
Didn't work... This is the CSS code I have so far:

      #ReviewTable{
            border:1px solid #C6C6C6;
            margin:2px 70px;
            border-collapse: collapse;
            column-width:auto
      }
      #ReviewTable td {
            font-size:1em;
            border:1px solid
            border-collapse:collapse;
            padding:3x 7px 2px 7px;
            column-width:auto
      }

Commented:
Try using just "width:auto;" and also set "white-space: nowrap;"

Commented:
Also, you are missing a ";" after your border property in the TD style group.
Commented:
#ReviewTable{
	border: 1px solid #C6C6C6;
	margin: 2px 70px;
	border-collapse: collapse;
	column-width: auto
}

#ReviewTable td {
	font-size: 1em;
	border: 1px solid;
	border-collapse: collapse;
	padding: 3x 7px 2px 7px;
	column-width: auto;
	white-space: nowrap;
}

Open in new window


This seems to work for me.

http://mjco.me.uk/test/

Commented:
Also, you may want to specify the border colour in the TD group rather than the Table group.
Horalia RodriguezIT Developer

Author

Commented:
Not working yet... And I also just realized I have another issue as I was applying these changes to the other tables.... In the table, I have set some javascript to hide the contents of the row if the row doesn't have an answer... Well, the row is hidden, but not the borders. So, when a few rows are hidden, a thicker gray line appears in its place. Would you have any idea how to fix this?

Commented:
can you post an archive of the complete code. Looking at partial html/css makes it difficult to find the issue.
Horalia RodriguezIT Developer

Author

Commented:
I decided to use a different route to create the table, unfortunately, this being an HTML driven code, there's not a lot I can do with just CSS. I appreciate your time and award you the points. Thank you.

Explore More ContentExplore courses, solutions, and other research materials related to this topic.