Tribute page - Grace Hopper + help needed with jQuery Issue

Code Feedback
1

Please checkout my tribute page to Adm. Grace Hopper

One issue I’m having deals with using jQuery to adjust the width of columns in the Facts table. I’m unable to force column width changes. I’m doing this by defining the following two CSS classes that define the default widths (as percentages) of the two columns in the table:

CSS:
.summary-first-col {
width: 30%;
}

.summary-second-col {
width: 70%;
}

Next, in the HTML annotate the <DIV> containing the table with 'id=“gmh-summary”’.

Finally, in the I’ve added the following to add the CSS classes to the first and second

in the table: 
    $("#gmh-summary table tr td")
    	.first().addClass("summary-first-col")
    	.next().addClass("summary-second-col");

The issue is that no matter what value I change the widths to in the CSS, the column widths always appear to be set to fit the longest string of the column.

Any help at all will be appreciated. Thanks!

2

Hi jdmedlock.
I just add this to your CSS, after body element and it looks fine to me.

table { width: 50%; }

3

Thanks salasy! I think I see the issue here. The width of the table is overriding any widths I specify for the columns.

4

It is much cleaner with Bootstrap:

<table class="table table-striped"> <tbody> <tr> <th>Nickname:</th> <!--first <td> in every <tr> should be renamed to <th>--> <td>"Amazing Grace"</td> </tr> <tr> <th>Born:</th> <!--first <td> in every <tr> should be renamed to <th>--> <td>December 9, 1906<br /> New York City, New York, U.S.</td> </tr> ....

5

This was a great suggestion. I embedded my table wit the following and removed the script and the custom CSS to arrive at a much simpler solution.

 <div class="table-responsive">
  <table class="table table-bordered">

Also, for anyone else encountering similar CSS or Bootstrap “issues”, w3schools.com has great reference material for both.