Tables and Boders. AGAIN!

For general web development questions that are not specifically related to CSS HTML Validator. This includes (but is not limited to) general HTML, CSS, Accessibility, JavaScript, and SEO questions.
paulp575
Rank IV - Intermediate
Posts: 170
Joined: Tue Aug 09, 2005 1:20 pm
Location: Spokane WA

Tables and Boders. AGAIN!

Post by paulp575 »

Here we go again - tables and borders not working.

Here's my CSS:

Code: Select all

table.test
{
  BORDER-COLLAPSE: collapse;
}

table.test td
{
  PADDING: .3em;
  BORDER: 2px solid black;
}
and here's the table I'm trying to create that has a 2 pixel black border surrounds the table and includes the columns and rows all having a border:

Code: Select all

<table id="test" class="WIDTH100P">
  <tr class="TEXT-ALIGN-CENTER TEXT-VERTICAL-ALIGN-TOP">
    <th class="WIDTH50P">
      Locomotive (6-83605)
      <br>
      Presidents LionChief&reg; Plus Mikado (6-83605)
      <br>
      <a href="trains/Presidential%20Boxcar%20Series/6-83605%20-%20Presidents%20LionChief%20Plus%20Mikado%20Locomotive.jpg" onclick="NewWindow(this.href,'name','834','340','yes');return false;">
        <img src="trains/Presidential%20Boxcar%20Series/6-83605%20-%20Presidents%20LionChief%20Plus%20Mikado%20Locomotive.jpg" alt="Presidents LionChief&reg; Plus Mikado Locomotive image" title="Presidents LionChief&reg; Plus Mikado Locomotive" width="300" height="118">
      </a>
    </th>
    <th class="WIDTH50P">
      Presidential Caboose (6-84782)
      <br>
      <a href="trains/Presidential%20Boxcar%20Series/6-84782%20-%20Presidential%20Caboose.jpg" onclick="NewWindow(this.href,'name','1786','900','yes');return false;">
        <img src="trains/Presidential%20Boxcar%20Series/6-84782%20-%20Presidential%20Caboose.jpg" alt="Presidential Caboose image" title="PresidentialCaboose" width="300" height="149">
      </a>
    </th>
  </tr>
</table>
Why is it not displaying any lines?
Last edited by paulp575 on Mon Oct 17, 2022 10:06 pm, edited 1 time in total.
paulp575
User avatar
Albert Wiersch
Site Admin
Posts: 3785
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX

Re: Tables and BOrders. AGAIN!

Post by Albert Wiersch »

Hello,

I found two issues. You should add the class "test" to the table:

Code: Select all

<table id="test" class="test WIDTH100P">
And also you have <th> elements in the table (not <td> elements) so you probably want to change this selector:

Code: Select all

table.test td
to this to also include <th> elements:

Code: Select all

table.test td, table.test th
or this using the :is() CSS pseudo-class:

Code: Select all

table.test :is(td, th)
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
paulp575
Rank IV - Intermediate
Posts: 170
Joined: Tue Aug 09, 2005 1:20 pm
Location: Spokane WA

Re: Tables and Boders. AGAIN!

Post by paulp575 »

That worked!
At first I had 2 individual boxes around each cell with a very small space between the cells.
So I unremarked the following:

Code: Select all

table.test
{
  BORDER-COLLAPSE: collapse;
}
Then I decided since both CSS were for the same table why not combine into:

Code: Select all

table.test td, table.test th
{
  PADDING: .3em;
  BORDER: 2px solid black;
  BORDER-COLLAPSE: collapse;
}
But that didn't change anything.
So I removed the collapse style and made it a separate style:

Code: Select all

table.test
{
  BORDER-COLLAPSE: collapse;
}
And that worked.

Why cant those 2 styles be combined into one style - if for no other reason to keep the number of styles small as possible - clean as possible.
I like short and concise.
paulp575
User avatar
Albert Wiersch
Site Admin
Posts: 3785
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX

Re: Tables and Boders. AGAIN!

Post by Albert Wiersch »

paulp575 wrote: Mon Oct 17, 2022 10:19 pm Why cant those 2 styles be combined into one style - if for no other reason to keep the number of styles small as possible - clean as possible.
I like short and concise.
Hi Paul,

The border-collapse CSS property applies to table and inline-table elements so these selectors don't cut it (the below selectors apply to <td> and <th> elements):

Code: Select all

table.test td, table.test th
You could try adding table.test and see if you get the results you want:

Code: Select all

table.test td, table.test th, table.test
I hope this helps!
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial