[SOLVED] Scrollable Table Headers

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.
Post Reply
paulp575
Rank IV - Intermediate
Posts: 170
Joined: Tue Aug 09, 2005 1:20 pm
Location: Spokane WA
Contact:

[SOLVED] Scrollable Table Headers

Post by paulp575 »

Finally - somewhat - solved the problem of scrollable table headers.
What I'd like to do is have the vertical lines appear in the table headers as well as place a couple spaces in front of the text in the table headers.

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-title" content="Cnty Cmr Mtgs">
<meta name="description" content="County Commissioner Meetings – Dates, Agendas, and Minutes">
<title>County Commissioner Meetings – Dates, Agendas, and Minutes</title>

<style>
  body
  {
    FONT-SIZE: 12pt;
    FONT-FAMILY: Arial,helvetica,sans-serif;
    MARGIN: 10px;
    BACKGROUND-COLOR: #ffffff;                                  /* white */
  }

  A:LINK
  {
    FONT-SIZE: 12pt;
    FONT-FAMILY: arial,helvetica,sans-serif;
    COLOR: #0000ff;                                             /* blue */
    TEXT-DECORATION: none;
  }

  A:VISITED
  {
    FONT-SIZE: 12pt;
    FONT-FAMILY: arial,helvetica,sans-serif;
    COLOR: #000080;                                             /* navy */
    TEXT-DECORATION: none;
  }

  A:HOVER
  {
    FONT-SIZE: 12pt;
    FONT-FAMILY: arial,helvetica,sans-serif;
    COLOR: #0000ff;                                             /* blue */
    TEXT-DECORATION: underline;
  }

  A:ACTIVE
  {
    FONT-SIZE: 12pt;
    FONT-FAMILY: arial,helvetica,sans-serif;
    COLOR: #0000ff;                                             /* blue */
    TEXT-DECORATION: none;
  }

  *.FLOAT-RIGHT
  {
    FLOAT: right;
  }

  *.IMAGE-ALIGN-VERTICAL                                        /* Aligns e-mail addresses on page */
  {
    VERTICAL-ALIGN: -7px;
  }

  *.MARGIN-LEFT-5PX
  {
    MARGIN-LEFT: 5px;
  }

  *.MARGIN-LEFT-10PX
  {
    MARGIN-LEFT: 10px;
  }

  table#COUNTY_COMMISSIONERS
  {
    BORDER-COLLAPSE: collapse;
  }

  table#COUNTY_COMMISSIONERS th, td
  {
    PADDING: .2em;
    BORDER: 1px solid black;
  }

/*
  table#APPROPRIATE_GRAPHIC                  /* doesn't work */
  {
    BORDER-COLLAPSE: collapse;
  }

  table#APPROPRIATE_GRAPHIC td                  /* doesn't work */
  {
    PADDING: .2em;
    BORDER: none;
  }
*/

/* Begin CSS to fix table header */

  .tableFixHead
  {
    overflow: auto; height: 100px;
  }

  .tableFixHead thead th
  {
    position: sticky; top: 0; z-index: 1;
    background: #eeeeee;
    box-shadow: 0px 0px, 0 1px #000000
/*
    box-shadow: inset 1px 1px #000, 0 1px #000;         (Original CSS)
*/
  }

/* End CSS to fix table header */

  *.TEXT-ALIGN-CENTER
  {
    TEXT-ALIGN: center;
  }

  *.TEXT-ALIGN-LEFT
  {
    TEXT-ALIGN: left;
  }

  *.TEXT-BOLD
  {
    FONT-WEIGHT: bold;
  }

  tr:nth-child(even)
  {
    BACKGROUND-COLOR: #f2f2f2;
  }
</style>

</head>

<body>

<h3 class="TEXT-ALIGN-CENTER TEXT-BOLD">County Commissioner Meetings &#8211; Dates, Agendas, and Minutes</h3>

<table id="APPROPRIATE_GRAPHIC" class="FLOAT-RIGHT MARGIN-LEFT-10PX">
  <tr><td>(appropriate graphic)</td></tr>
</table>
(introductory text)
<br><br>

<div class="TEXT-ALIGN-CENTER"><span class="TEXT-BOLD">Note:</span> All links open in a new window.</div>

<table id="COUNTY_COMMISSIONERS" class="tableFixHead">
  <thead>
    <tr class="TEXT-ALIGN-LEFT MARGIN-LEFT-5PX">
      <th>County</th>
      <th>Meets</th>
      <th>Agendas</th>
      <th>Minutes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Adams</td>
      <td>
        Schedule: <a href="https://cms5.revize.com/revize/adamscounty/DeptPages/Commisioners/R-039-2022.pdf">https://cms5.revize.com/revize/adamscounty/DeptPages/Commisioners/R-039-2022.pdf</a>
      </td>
      <td colspan="2">
        <a href="https://www.co.adams.wa.us/departments/commissioners/commissioners_meetings.php" target="_blank">https://www.co.adams.wa.us/departments/commissioners/commissioners_meetings.php</a>
      </td>
    </tr>
    <tr>
      <td>Asotin</td>
      <td>1st, 2nd, 4th Mon – 9:00 AM; 3rd Mon – 6:30 PM</td>
      <td colspan="2">
        <a href="https://www.co.asotin.wa.us/AgendaCenter/Board-of-Commissioners-2" target="_blank">https://www.co.asotin.wa.us/AgendaCenter/Board-of-Commissioners-2</a>
      </td>
    </tr>
    <tr>
      <td>Benton</td>
      <td>Tues – 9:00 AM</td>
      <td colspan="2">
        <a href="https://www.co.benton.wa.us/agendalist.aspx?categoryid=1181" target="_blank">https://www.co.benton.wa.us/agendalist.aspx?categoryid=1181</a>
      </td>
    </tr>
    <tr>
      <td>Chelan</td>
      <td>Mon – 9:00 AM</td>
      <td>
        <a href="https://www.co.chelan.wa.us/board-of-commissioners#weeklyagenda" target="_blank">https://www.co.chelan.wa.us/board-of-commissioners#weeklyagenda</a>
      </td>
      <td>
        <a href="https://www.co.chelan.wa.us/board-of-commissioners/pages/meeting-minutes" target="_blank">https://www.co.chelan.wa.us/board-of-commissioners/pages/meeting-minutes</a>
      </td>
    </tr>
    <tr>
      <td>Columbia</td>
      <td>1st &amp; 3rd Mon – 9:00 AM</td>
      <td colspan="2">
        <a href="http://www.columbiaco.com/114/County-Commissioners" target="_blank">http://www.columbiaco.com/114/County-Commissioners</a>
      </td>
    </tr>
    <tr>
      <td>Douglas</td>
      <td>Mon – 9:00 AM</td>
      <td colspan="2">
        <a href="https://www.douglascountywa.net/AgendaCenter/Board-of-County-Commissioners-2" target="_blank">https://www.douglascountywa.net/AgendaCenter/Board-of-County-Commissioners-2</a>
      </td>
    </tr>
    <tr>
      <td>Ferry</td>
      <td>Mon &amp; Tue - 9:00 AM</td>
      <td colspan="2">
        <a href="https://ferrycounty-my.sharepoint.com/:f:/g/personal/bocconedrive_co_ferry_wa_us/EtaS5cH-vsBOtEYFwzwoxk8BXoiIz9QJnbU0Eq2M8Mgknw?e=uerk1h" target="_blank">https://ferrycounty-my.sharepoint.com/:f:/g/personal/bocconedrive_co_ferry_wa_us/EtaS5cH-vsBOtEYFwzwoxk8BXoiIz9QJnbU0Eq2M8Mgknw?e=uerk1h</a>
      </td>
    </tr>
    <tr>
      <td>Franklin</td>
      <td>Wed – 9:00 AM</td>
      <td>
        <a href="https://www.franklincountywa.gov/614/Meeting-Agendas" target="_blank">https://www.franklincountywa.gov/614/Meeting-Agendas</a>
      </td>
      <td>
        <a href="https://www.franklincountywa.gov/615/Meeting-Minutes" target="_blank">https://www.franklincountywa.gov/615/Meeting-Minutes</a>
      </td>
    </tr>
    <tr>
      <td>Garfield</td>
      <td>Mon – 9:00 AM</td>
      <td colspan="2">
        <a href="https://www.garfieldcountywa.gov/meetings" target="_blank">https://www.garfieldcountywa.gov/meetings</a>
      </td>
    </tr>
    <tr>
      <td>Grant</td>
      <td>Mon – 9:00 AM</td>
      <td colspan="2">
        <a href="https://www.grantcountywa.gov/AgendaCenter" target="_blank">https://www.grantcountywa.gov/AgendaCenter</a>
      </td>
    </tr>
    <tr>
      <td>Kittitas</td>
      <td>1st &amp; 3rd Tues – 10:00 AM</td>
      <td colspan="2">
        <a href="https://www.co.kittitas.wa.us/boc/agendas.aspx" target="_blank">https://www.co.kittitas.wa.us/boc/agendas.aspx</a>
      </td>
    </tr>
    <tr>
      <td>Klickitat</td>
      <td>Tues – 9:00 AM</td>
      <td colspan="2">
        <a href="http://www.klickitatcounty.org/AgendaCenter/Board-of-County-Commissioners-5" target="_blank">http://www.klickitatcounty.org/AgendaCenter/Board-of-County-Commissioners-5</a>
      </td>
    </tr>
    <tr>
      <td>Lincoln</td>
      <td>1st &amp; 3rd Mon – 8:00 AM</td>
      <td>
        <a href="https://www.co.lincoln.wa.us/commissioners/tentative-agenda/" target="_blank">https://www.co.lincoln.wa.us/commissioners/tentative-agenda/</a>
      </td>
      <td>
        <a href="https://www.co.lincoln.wa.us/commissioners/summary-minutes/" target="_blank">https://www.co.lincoln.wa.us/commissioners/summary-minutes/</a>
      </td>
    </tr>
    <tr>
      <td>Okanogan</td>
      <td>Mon, Tue, &amp; Wed – 9:00 AM</td>
      <td>
        <a href="https://www.okanogancounty.org/government/commissioners/agenda.php" target="_blank">https://www.okanogancounty.org/government/commissioners/agenda.php</a>
      </td>
      <td>
        <a href="https://www.okanogancounty.org/offices/commissioners/commissioners_proceedings.php#outer-5085" target="_blank">https://www.okanogancounty.org/offices/commissioners/commissioners_proceedings.php#outer-5085</a>
      </td>
    </tr>
    <tr>
      <td>Pend&nbsp;Oreille</td>
      <td>Mon – 9:00 AM</td>
      <td colspan="2">
        <a href="https://www.pendoreilleco.org/meetings/recent?boards-commissions=166&combine=&field_smart_date_end_value=&field_smart_date_value_1=" target="_blank">https://www.pendoreilleco.org/meetings/recent?boards-commissions=166&combine=&field_smart_date_end_value=&field_smart_date_value_1=</a>
      </td>
    </tr>
    <tr>
      <td>Spokane</td>
      <td>Mon &amp; Tues – 9:00 AM</td>
      <td colspan="2">
        <a href="https://www.spokanecounty.org/4542/Agendas-Minutes" target="_blank">https://www.spokanecounty.org/4542/Agendas-Minutes</a>
      </td>
    </tr>
    <tr>
      <td>Stevens</td>
      <td>Mon – 8:00 AM</td>
      <td colspan="2">
        <a href="https://www.stevenscountywa.gov/agendalist.aspx?categoryid=10153" target="_blank">https://www.stevenscountywa.gov/agendalist.aspx?categoryid=10153</a>
      </td>
    </tr>
    <tr>
      <td>Walla Walla</td>
      <td>Mon & Tues – Varies</td>
      <td colspan="2">
        <a href="https://www.co.walla-walla.wa.us/government/commissioners/agendas.php" target="_blank">https://www.co.walla-walla.wa.us/government/commissioners/agendas.php</a>
      </td>
    </tr>
    <tr>
      <td>Whitman</td>
      <td>Mon – 9:00 AM</td>
      <td colspan="2">
        <a href="https://www.whitmancounty.org/AgendaCenter/County-Commissioners-5" target="_blank">https://www.whitmancounty.org/AgendaCenter/County-Commissioners-5</a>
      </td>
    </tr>
    <tr>
      <td>Yakima</td>
      <td>Tues – 10:00 AM</td>
      <td colspan="2">
        <a href="https://www.yakimacounty.us/AgendaCenter/Board-of-Commissioners-2" target="_blank">https://www.yakimacounty.us/AgendaCenter/Board-of-Commissioners-2</a>
      </td>
    </tr>
  </tbody>
</table>

<br>
<div class="TEXT-ALIGN-CENTER">
    <span class="TEXT-BOLD">NOTE:</span> Dates and times subject to change. Contact county commissioners to confirm dates and times.
</div>
<br>

<div class="TEXT-ALIGN-CENTER">
    <span class="TEXT-BOLD">Errors? Corrections?</span>
  E-mail: <img class="IMAGE-ALIGN-VERTICAL" src="updates-e-mail-address.jpg" alt="Updates e-mail address image" title="Updates e-mail address" width="251" height="23">
    <br>
  Please provide as much detail as possible to ensure we make the right correction(s).
</div>
<br>

<div class="TEXT-ALIGN-CENTER">Page last updated: December 4, 2023</div>
<br>
</body>
</html>
Last edited by paulp575 on Tue Dec 05, 2023 6:27 pm, edited 2 times in total.
paulp575
paulp575
Rank IV - Intermediate
Posts: 170
Joined: Tue Aug 09, 2005 1:20 pm
Location: Spokane WA
Contact:

Re: Scroable Table Headers

Post by paulp575 »

Fixed the problem - almost - with the header borders.
Now they are present except in the right-most column and they don't line up exactly with the table borders.And still haven't figured out how to add a couple spaces before each table header. Margin-left and padding-left don't solve that.

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-title" content="Cnty Cmr Mtgs">
<meta name="description" content="County Commissioner Meetings – Dates, Agendas, and Minutes">
<title>County Commissioner Meetings – Dates, Agendas, and Minutes</title>

<style>
  body
  {
    FONT-SIZE: 12pt;
    FONT-FAMILY: Arial,helvetica,sans-serif;
    MARGIN: 10px;
    BACKGROUND-COLOR: #ffffff;                                  /* white */
  }

  A:LINK
  {
    FONT-SIZE: 12pt;
    FONT-FAMILY: arial,helvetica,sans-serif;
    COLOR: #0000ff;                                             /* blue */
    TEXT-DECORATION: none;
  }

  A:VISITED
  {
    FONT-SIZE: 12pt;
    FONT-FAMILY: arial,helvetica,sans-serif;
    COLOR: #000080;                                             /* navy */
    TEXT-DECORATION: none;
  }

  A:HOVER
  {
    FONT-SIZE: 12pt;
    FONT-FAMILY: arial,helvetica,sans-serif;
    COLOR: #0000ff;                                             /* blue */
    TEXT-DECORATION: underline;
  }

  A:ACTIVE
  {
    FONT-SIZE: 12pt;
    FONT-FAMILY: arial,helvetica,sans-serif;
    COLOR: #0000ff;                                             /* blue */
    TEXT-DECORATION: none;
  }

  *.FLOAT-RIGHT
  {
    FLOAT: right;
  }

  *.IMAGE-ALIGN-VERTICAL                                        /* Aligns e-mail addresses on page */
  {
    VERTICAL-ALIGN: -7px;
  }

  *.MARGIN-LEFT-5PX
  {
    MARGIN-LEFT: 5px;
  }

  *.MARGIN-LEFT-10PX
  {
    MARGIN-LEFT: 10px;
  }

  table#COUNTY_COMMISSIONERS
  {
    BORDER-COLLAPSE: collapse;
  }

  table#COUNTY_COMMISSIONERS th, td
  {
    PADDING: .2em;
    BORDER: 1px solid black;
  }

/*
  table#APPROPRIATE_GRAPHIC                                     /* Does not work! */
  {
    BORDER-COLLAPSE: collapse;
  }

  table#APPROPRIATE_GRAPHIC td                                  /* Does not work! */
  {
    PADDING: .2em;
    BORDER: none;
  }
*/

/* Begin CSS to fix table header */

  .tableFixHead
  {
    overflow: auto; height: 100px;
  }

  .tableFixHead thead th
  {
    position: sticky; top: 0; z-index: 1;
    background: #eeeeee;
    box-shadow: inset 1px -1px #000000;
  }

/* End CSS to fix table header */

  *.TEXT-ALIGN-CENTER
  {
    TEXT-ALIGN: center;
  }

  *.TEXT-ALIGN-LEFT
  {
    TEXT-ALIGN: left;
  }

  *.TEXT-BOLD
  {
    FONT-WEIGHT: bold;
  }

  tr:nth-child(even)
  {
    BACKGROUND-COLOR: #f2f2f2;
  }
</style>

</head>

<body>

<h3 class="TEXT-ALIGN-CENTER TEXT-BOLD">County Commissioner Meetings &#8211; Dates, Agendas, and Minutes</h3>

<table id="APPROPRIATE_GRAPHIC" class="FLOAT-RIGHT MARGIN-LEFT-10PX">
  <tr><td>(appropriate graphic)</td></tr>
</table>
(introductory text)
<br><br>

<div class="TEXT-ALIGN-CENTER"><span class="TEXT-BOLD">Note:</span> All links open in a new window.</div>

<table id="COUNTY_COMMISSIONERS" class="tableFixHead">
  <thead>
    <tr class="TEXT-ALIGN-LEFT MARGIN-LEFT-5PX">
      <th>County</th>
      <th>Meets</th>
      <th>Agendas</th>
      <th>Minutes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Adams</td>
      <td>
        Schedule: <a href="https://cms5.revize.com/revize/adamscounty/DeptPages/Commisioners/R-039-2022.pdf">https://cms5.revize.com/revize/adamscounty/DeptPages/Commisioners/R-039-2022.pdf</a>
      </td>
      <td colspan="2">
        <a href="https://www.co.adams.wa.us/departments/commissioners/commissioners_meetings.php" target="_blank">https://www.co.adams.wa.us/departments/commissioners/commissioners_meetings.php</a>
      </td>
    </tr>
    <tr>
      <td>Asotin</td>
      <td>1st, 2nd, 4th Mon – 9:00 AM; 3rd Mon – 6:30 PM</td>
      <td colspan="2">
        <a href="https://www.co.asotin.wa.us/AgendaCenter/Board-of-Commissioners-2" target="_blank">https://www.co.asotin.wa.us/AgendaCenter/Board-of-Commissioners-2</a>
      </td>
    </tr>
    <tr>
      <td>Benton</td>
      <td>Tues – 9:00 AM</td>
      <td colspan="2">
        <a href="https://www.co.benton.wa.us/agendalist.aspx?categoryid=1181" target="_blank">https://www.co.benton.wa.us/agendalist.aspx?categoryid=1181</a>
      </td>
    </tr>
    <tr>
      <td>Chelan</td>
      <td>Mon – 9:00 AM</td>
      <td>
        <a href="https://www.co.chelan.wa.us/board-of-commissioners#weeklyagenda" target="_blank">https://www.co.chelan.wa.us/board-of-commissioners#weeklyagenda</a>
      </td>
      <td>
        <a href="https://www.co.chelan.wa.us/board-of-commissioners/pages/meeting-minutes" target="_blank">https://www.co.chelan.wa.us/board-of-commissioners/pages/meeting-minutes</a>
      </td>
    </tr>
    <tr>
      <td>Columbia</td>
      <td>1st &amp; 3rd Mon – 9:00 AM</td>
      <td colspan="2">
        <a href="http://www.columbiaco.com/114/County-Commissioners" target="_blank">http://www.columbiaco.com/114/County-Commissioners</a>
      </td>
    </tr>
    <tr>
      <td>Douglas</td>
      <td>Mon – 9:00 AM</td>
      <td colspan="2">
        <a href="https://www.douglascountywa.net/AgendaCenter/Board-of-County-Commissioners-2" target="_blank">https://www.douglascountywa.net/AgendaCenter/Board-of-County-Commissioners-2</a>
      </td>
    </tr>
    <tr>
      <td>Ferry</td>
      <td>Mon &amp; Tue - 9:00 AM</td>
      <td colspan="2">
        <a href="https://ferrycounty-my.sharepoint.com/:f:/g/personal/bocconedrive_co_ferry_wa_us/EtaS5cH-vsBOtEYFwzwoxk8BXoiIz9QJnbU0Eq2M8Mgknw?e=uerk1h" target="_blank">https://ferrycounty-my.sharepoint.com/:f:/g/personal/bocconedrive_co_ferry_wa_us/EtaS5cH-vsBOtEYFwzwoxk8BXoiIz9QJnbU0Eq2M8Mgknw?e=uerk1h</a>
      </td>
    </tr>
    <tr>
      <td>Franklin</td>
      <td>Wed – 9:00 AM</td>
      <td>
        <a href="https://www.franklincountywa.gov/614/Meeting-Agendas" target="_blank">https://www.franklincountywa.gov/614/Meeting-Agendas</a>
      </td>
      <td>
        <a href="https://www.franklincountywa.gov/615/Meeting-Minutes" target="_blank">https://www.franklincountywa.gov/615/Meeting-Minutes</a>
      </td>
    </tr>
    <tr>
      <td>Garfield</td>
      <td>Mon – 9:00 AM</td>
      <td colspan="2">
        <a href="https://www.garfieldcountywa.gov/meetings" target="_blank">https://www.garfieldcountywa.gov/meetings</a>
      </td>
    </tr>
    <tr>
      <td>Grant</td>
      <td>Mon – 9:00 AM</td>
      <td colspan="2">
        <a href="https://www.grantcountywa.gov/AgendaCenter" target="_blank">https://www.grantcountywa.gov/AgendaCenter</a>
      </td>
    </tr>
    <tr>
      <td>Kittitas</td>
      <td>1st &amp; 3rd Tues – 10:00 AM</td>
      <td colspan="2">
        <a href="https://www.co.kittitas.wa.us/boc/agendas.aspx" target="_blank">https://www.co.kittitas.wa.us/boc/agendas.aspx</a>
      </td>
    </tr>
    <tr>
      <td>Klickitat</td>
      <td>Tues – 9:00 AM</td>
      <td colspan="2">
        <a href="http://www.klickitatcounty.org/AgendaCenter/Board-of-County-Commissioners-5" target="_blank">http://www.klickitatcounty.org/AgendaCenter/Board-of-County-Commissioners-5</a>
      </td>
    </tr>
    <tr>
      <td>Lincoln</td>
      <td>1st &amp; 3rd Mon – 8:00 AM</td>
      <td>
        <a href="https://www.co.lincoln.wa.us/commissioners/tentative-agenda/" target="_blank">https://www.co.lincoln.wa.us/commissioners/tentative-agenda/</a>
      </td>
      <td>
        <a href="https://www.co.lincoln.wa.us/commissioners/summary-minutes/" target="_blank">https://www.co.lincoln.wa.us/commissioners/summary-minutes/</a>
      </td>
    </tr>
    <tr>
      <td>Okanogan</td>
      <td>Mon, Tue, &amp; Wed – 9:00 AM</td>
      <td>
        <a href="https://www.okanogancounty.org/government/commissioners/agenda.php" target="_blank">https://www.okanogancounty.org/government/commissioners/agenda.php</a>
      </td>
      <td>
        <a href="https://www.okanogancounty.org/offices/commissioners/commissioners_proceedings.php#outer-5085" target="_blank">https://www.okanogancounty.org/offices/commissioners/commissioners_proceedings.php#outer-5085</a>
      </td>
    </tr>
    <tr>
      <td>Pend&nbsp;Oreille</td>
      <td>Mon – 9:00 AM</td>
      <td colspan="2">
        <a href="https://www.pendoreilleco.org/meetings/recent?boards-commissions=166&combine=&field_smart_date_end_value=&field_smart_date_value_1=" target="_blank">https://www.pendoreilleco.org/meetings/recent?boards-commissions=166&combine=&field_smart_date_end_value=&field_smart_date_value_1=</a>
      </td>
    </tr>
    <tr>
      <td>Spokane</td>
      <td>Mon &amp; Tues – 9:00 AM</td>
      <td colspan="2">
        <a href="https://www.spokanecounty.org/4542/Agendas-Minutes" target="_blank">https://www.spokanecounty.org/4542/Agendas-Minutes</a>
      </td>
    </tr>
    <tr>
      <td>Stevens</td>
      <td>Mon – 8:00 AM</td>
      <td colspan="2">
        <a href="https://www.stevenscountywa.gov/agendalist.aspx?categoryid=10153" target="_blank">https://www.stevenscountywa.gov/agendalist.aspx?categoryid=10153</a>
      </td>
    </tr>
    <tr>
      <td>Walla Walla</td>
      <td>Mon & Tues – Varies</td>
      <td colspan="2">
        <a href="https://www.co.walla-walla.wa.us/government/commissioners/agendas.php" target="_blank">https://www.co.walla-walla.wa.us/government/commissioners/agendas.php</a>
      </td>
    </tr>
    <tr>
      <td>Whitman</td>
      <td>Mon – 9:00 AM</td>
      <td colspan="2">
        <a href="https://www.whitmancounty.org/AgendaCenter/County-Commissioners-5" target="_blank">https://www.whitmancounty.org/AgendaCenter/County-Commissioners-5</a>
      </td>
    </tr>
    <tr>
      <td>Yakima</td>
      <td>Tues – 10:00 AM</td>
      <td colspan="2">
        <a href="https://www.yakimacounty.us/AgendaCenter/Board-of-Commissioners-2" target="_blank">https://www.yakimacounty.us/AgendaCenter/Board-of-Commissioners-2</a>
      </td>
    </tr>
  </tbody>
</table>

<br>
<div class="TEXT-ALIGN-CENTER">
    <span class="TEXT-BOLD">NOTE:</span> Dates and times subject to change. Contact county commissioners to confirm dates and times.
</div>
<br>

<div class="TEXT-ALIGN-CENTER">
    <span class="TEXT-BOLD">Errors? Corrections?</span>
  E-mail: <img class="IMAGE-ALIGN-VERTICAL" src="updates-e-mail-address.jpg" alt="Updates e-mail address image" title="Updates e-mail address" width="251" height="23">
    <br>
  Please provide as much detail as possible to ensure we make the right correction(s).
</div>
<br>

<div class="TEXT-ALIGN-CENTER">Page last updated: December 4, 2023</div>
<br>
</body>
</html>
paulp575
User avatar
Albert Wiersch
Site Admin
Posts: 3783
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Scroable Table Headers

Post by Albert Wiersch »

You could add some left padding to the header cells with something like:

Code: Select all

table#COUNTY_COMMISSIONERS th { padding-left: .5em; }
I tested the above and it works (assuming I understand what you're trying to do).

If you are using a table (i.e. the table with id="APPROPRIATE_GRAPHIC") just to place a graphic, then I would suggest something else. Tables should only be used to display data tables and never for layout. That used to be common in the past but there are much better ways now. Also, you should be able to just float an image by itself or a <div> container.

I'm not sure what you mean by "the vertical lines appear in the table headers". I see vertical lines separating the header cells using the HTML you provided.
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
Contact:

Re: Scroable Table Headers

Post by paulp575 »

I added the suggested "table#COUNTY_COMMISSIONERS th { padding-left: .5em; }" but that didn't move the table headers to the right. I even tried 10.0em and 100.0em and that didn't help (see attached screenshot).

As far as the border around the table for the "APPROPRIATE_GRAPHIC" never mind as that was just a placeholder for that eventual graphic.

One other thing I noticed and not sure if it can be resolved, when you look at the attached screenshot you'll notice the row containing the table headers are not aligned exactly with the columns in the table - they are a little to the right. Maybe it's a function of the browser I'm using - Firefox?

Thanks.
Attachments
Table headers not moving right.jpg
Table headers not moving right.jpg (220.3 KiB) Viewed 5348 times
paulp575
User avatar
Albert Wiersch
Site Admin
Posts: 3783
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Scroable Table Headers

Post by Albert Wiersch »

paulp575 wrote: Mon Dec 04, 2023 11:55 pm I added the suggested "table#COUNTY_COMMISSIONERS th { padding-left: .5em; }" but that didn't move the table headers to the right. I even tried 10.0em and 100.0em and that didn't help (see attached screenshot).
I bet you added it before the "table#COUNTY_COMMISSIONERS th, td" line so it was overridden.

I would suggest that instead of:

Code: Select all

  table#COUNTY_COMMISSIONERS th, td
  {
    PADDING: .2em;
    BORDER: 1px solid black;
  }
You use something like:

Code: Select all

  table#COUNTY_COMMISSIONERS th, td {
    BORDER: 1px solid black;
  }

  table#COUNTY_COMMISSIONERS td
  {
    PADDING: .2em;
  }

  table#COUNTY_COMMISSIONERS th
  {
    PADDING: .2em .2em .2m .5em;
  }
paulp575 wrote: Mon Dec 04, 2023 11:55 pm One other thing I noticed and not sure if it can be resolved, when you look at the attached screenshot you'll notice the row containing the table headers are not aligned exactly with the columns in the table - they are a little to the right. Maybe it's a function of the browser I'm using - Firefox?
I think it has to do with the border and/or box-shadow.

I removed the border and box-shadow lines and added this at the end of the style definitions:

Code: Select all

table#COUNTY_COMMISSIONERS th { padding-left: .5em; }
td, th { border: 1px solid black; }
I think it looks the way you want it to look, at least in Chrome and Edge. For some reason there are some missing vertical border lines in the heading row in Firefox... perhaps a Firefox bug.

Let me test Safari... yes, seems to work on my iPad in Safari too... so I'm going to say it's a Firefox bug.

Here is the URL with the small changes I made (you can use to see the changes and test in browsers):
https://www.htmlvalidator.com/test/table-test.html

Does the above URL display like you want it to in every browser except Firefox?
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
Contact:

Re: Scrollable Table Headers

Post by paulp575 »

It works good enough for all except Firefox.
I had to add back:

Code: Select all

  table#COUNTY_COMMISSIONERS
  {
    BORDER-COLLAPSE: collapse;
  }
to remove the spaces between the cells.

Thanks for your help with this.

Here's what it ended up looking like:

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-title" content="Cnty Cmr Mtgs">
<meta name="description" content="County Commissioner Meetings – Dates, Agendas, and Minutes">
<title>County Commissioner Meetings – Dates, Agendas, and Minutes</title>

<style>
  body
  {
    FONT-SIZE: 12pt;
    FONT-FAMILY: Arial,helvetica,sans-serif;
    MARGIN: 10px;
    BACKGROUND-COLOR: #ffffff;                                  /* white */
  }

  A:LINK
  {
    FONT-SIZE: 12pt;
    FONT-FAMILY: arial,helvetica,sans-serif;
    COLOR: #0000ff;                                             /* blue */
    TEXT-DECORATION: none;
  }

  A:VISITED
  {
    FONT-SIZE: 12pt;
    FONT-FAMILY: arial,helvetica,sans-serif;
    COLOR: #000080;                                             /* navy */
    TEXT-DECORATION: none;
  }

  A:HOVER
  {
    FONT-SIZE: 12pt;
    FONT-FAMILY: arial,helvetica,sans-serif;
    COLOR: #0000ff;                                             /* blue */
    TEXT-DECORATION: underline;
  }

  A:ACTIVE
  {
    FONT-SIZE: 12pt;
    FONT-FAMILY: arial,helvetica,sans-serif;
    COLOR: #0000ff;                                             /* blue */
    TEXT-DECORATION: none;
  }

  *.FLOAT-RIGHT
  {
    FLOAT: right;
  }

  *.IMAGE-ALIGN-VERTICAL                                        /* Aligns e-mail addresses on page */
  {
    VERTICAL-ALIGN: -7px;
  }

/* Begin CSS to fix table header */

  .tableFixHead
  {
    overflow: auto; height: 100px;
  }

  .tableFixHead thead th
  {
    position: sticky; top: 0; z-index: 1;
    background: #eeeeee;
    box-shadow: inset 1px -1px #000000;
  }

/* End CSS to fix table header */

  *.TEXT-ALIGN-CENTER
  {
    TEXT-ALIGN: center;
  }

  *.TEXT-ALIGN-LEFT
  {
    TEXT-ALIGN: left;
  }

  *.TEXT-BOLD
  {
    FONT-WEIGHT: bold;
  }

  tr:nth-child(even)
  {
    BACKGROUND-COLOR: #f2f2f2;
  }

  table#COUNTY_COMMISSIONERS
  {
    BORDER-COLLAPSE: collapse;
  }

  table#COUNTY_COMMISSIONERS th
  {
    PADDING-LEFT: .5em;
  }

  td, th
  {
    PADDING: .2em;
    BORDER: 1px solid black;
  }
</style>

</head>

<body>

<h3 class="TEXT-ALIGN-CENTER TEXT-BOLD">County Commissioner Meetings &#8211; Dates, Agendas, and Minutes</h3>

<table id="APPROPRIATE_GRAPHIC" class="FLOAT-RIGHT MARGIN-LEFT-10PX">
  <tr><td>(appropriate graphic)</td></tr>
</table>
(introductory text)
<br><br>

<div class="TEXT-ALIGN-CENTER"><span class="TEXT-BOLD">Note:</span> All links open in a new window.</div>

<table id="COUNTY_COMMISSIONERS" class="tableFixHead">
  <thead>
    <tr class="TEXT-ALIGN-LEFT MARGIN-LEFT-5PX">
      <th>County</th>
      <th>Meets</th>
      <th>Agendas</th>
      <th>Minutes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Adams</td>
      <td>
        Schedule: <a href="https://cms5.revize.com/revize/adamscounty/DeptPages/Commisioners/R-039-2022.pdf">https://cms5.revize.com/revize/adamscounty/DeptPages/Commisioners/R-039-2022.pdf</a>
      </td>
      <td colspan="2">
        <a href="https://www.co.adams.wa.us/departments/commissioners/commissioners_meetings.php" target="_blank">https://www.co.adams.wa.us/departments/commissioners/commissioners_meetings.php</a>
      </td>
    </tr>
    <tr>
      <td>Asotin</td>
      <td>1st, 2nd, 4th Mon – 9:00 AM; 3rd Mon – 6:30 PM</td>
      <td colspan="2">
        <a href="https://www.co.asotin.wa.us/AgendaCenter/Board-of-Commissioners-2" target="_blank">https://www.co.asotin.wa.us/AgendaCenter/Board-of-Commissioners-2</a>
      </td>
    </tr>
    <tr>
      <td>Benton</td>
      <td>Tues – 9:00 AM</td>
      <td colspan="2">
        <a href="https://www.co.benton.wa.us/agendalist.aspx?categoryid=1181" target="_blank">https://www.co.benton.wa.us/agendalist.aspx?categoryid=1181</a>
      </td>
    </tr>
    <tr>
      <td>Chelan</td>
      <td>Mon – 9:00 AM</td>
      <td>
        <a href="https://www.co.chelan.wa.us/board-of-commissioners#weeklyagenda" target="_blank">https://www.co.chelan.wa.us/board-of-commissioners#weeklyagenda</a>
      </td>
      <td>
        <a href="https://www.co.chelan.wa.us/board-of-commissioners/pages/meeting-minutes" target="_blank">https://www.co.chelan.wa.us/board-of-commissioners/pages/meeting-minutes</a>
      </td>
    </tr>
    <tr>
      <td>Columbia</td>
      <td>1st &amp; 3rd Mon – 9:00 AM</td>
      <td colspan="2">
        <a href="http://www.columbiaco.com/114/County-Commissioners" target="_blank">http://www.columbiaco.com/114/County-Commissioners</a>
      </td>
    </tr>
    <tr>
      <td>Douglas</td>
      <td>Mon – 9:00 AM</td>
      <td colspan="2">
        <a href="https://www.douglascountywa.net/AgendaCenter/Board-of-County-Commissioners-2" target="_blank">https://www.douglascountywa.net/AgendaCenter/Board-of-County-Commissioners-2</a>
      </td>
    </tr>
    <tr>
      <td>Ferry</td>
      <td>Mon &amp; Tue - 9:00 AM</td>
      <td colspan="2">
        <a href="https://ferrycounty-my.sharepoint.com/:f:/g/personal/bocconedrive_co_ferry_wa_us/EtaS5cH-vsBOtEYFwzwoxk8BXoiIz9QJnbU0Eq2M8Mgknw?e=uerk1h" target="_blank">https://ferrycounty-my.sharepoint.com/:f:/g/personal/bocconedrive_co_ferry_wa_us/EtaS5cH-vsBOtEYFwzwoxk8BXoiIz9QJnbU0Eq2M8Mgknw?e=uerk1h</a>
      </td>
    </tr>
    <tr>
      <td>Franklin</td>
      <td>Wed – 9:00 AM</td>
      <td>
        <a href="https://www.franklincountywa.gov/614/Meeting-Agendas" target="_blank">https://www.franklincountywa.gov/614/Meeting-Agendas</a>
      </td>
      <td>
        <a href="https://www.franklincountywa.gov/615/Meeting-Minutes" target="_blank">https://www.franklincountywa.gov/615/Meeting-Minutes</a>
      </td>
    </tr>
    <tr>
      <td>Garfield</td>
      <td>Mon – 9:00 AM</td>
      <td colspan="2">
        <a href="https://www.garfieldcountywa.gov/meetings" target="_blank">https://www.garfieldcountywa.gov/meetings</a>
      </td>
    </tr>
    <tr>
      <td>Grant</td>
      <td>Mon – 9:00 AM</td>
      <td colspan="2">
        <a href="https://www.grantcountywa.gov/AgendaCenter" target="_blank">https://www.grantcountywa.gov/AgendaCenter</a>
      </td>
    </tr>
    <tr>
      <td>Kittitas</td>
      <td>1st &amp; 3rd Tues – 10:00 AM</td>
      <td colspan="2">
        <a href="https://www.co.kittitas.wa.us/boc/agendas.aspx" target="_blank">https://www.co.kittitas.wa.us/boc/agendas.aspx</a>
      </td>
    </tr>
    <tr>
      <td>Klickitat</td>
      <td>Tues – 9:00 AM</td>
      <td colspan="2">
        <a href="http://www.klickitatcounty.org/AgendaCenter/Board-of-County-Commissioners-5" target="_blank">http://www.klickitatcounty.org/AgendaCenter/Board-of-County-Commissioners-5</a>
      </td>
    </tr>
    <tr>
      <td>Lincoln</td>
      <td>1st &amp; 3rd Mon – 8:00 AM</td>
      <td>
        <a href="https://www.co.lincoln.wa.us/commissioners/tentative-agenda/" target="_blank">https://www.co.lincoln.wa.us/commissioners/tentative-agenda/</a>
      </td>
      <td>
        <a href="https://www.co.lincoln.wa.us/commissioners/summary-minutes/" target="_blank">https://www.co.lincoln.wa.us/commissioners/summary-minutes/</a>
      </td>
    </tr>
    <tr>
      <td>Okanogan</td>
      <td>Mon, Tue, &amp; Wed – 9:00 AM</td>
      <td>
        <a href="https://www.okanogancounty.org/government/commissioners/agenda.php" target="_blank">https://www.okanogancounty.org/government/commissioners/agenda.php</a>
      </td>
      <td>
        <a href="https://www.okanogancounty.org/offices/commissioners/commissioners_proceedings.php#outer-5085" target="_blank">https://www.okanogancounty.org/offices/commissioners/commissioners_proceedings.php#outer-5085</a>
      </td>
    </tr>
    <tr>
      <td>Pend&nbsp;Oreille</td>
      <td>Mon – 9:00 AM</td>
      <td colspan="2">
        <a href="https://www.pendoreilleco.org/meetings/recent?boards-commissions=166&combine=&field_smart_date_end_value=&field_smart_date_value_1=" target="_blank">https://www.pendoreilleco.org/meetings/recent?boards-commissions=166&combine=&field_smart_date_end_value=&field_smart_date_value_1=</a>
      </td>
    </tr>
    <tr>
      <td>Spokane</td>
      <td>Mon &amp; Tues – 9:00 AM</td>
      <td colspan="2">
        <a href="https://www.spokanecounty.org/4542/Agendas-Minutes" target="_blank">https://www.spokanecounty.org/4542/Agendas-Minutes</a>
      </td>
    </tr>
    <tr>
      <td>Stevens</td>
      <td>Mon – 8:00 AM</td>
      <td colspan="2">
        <a href="https://www.stevenscountywa.gov/agendalist.aspx?categoryid=10153" target="_blank">https://www.stevenscountywa.gov/agendalist.aspx?categoryid=10153</a>
      </td>
    </tr>
    <tr>
      <td>Walla Walla</td>
      <td>Mon & Tues – Varies</td>
      <td colspan="2">
        <a href="https://www.co.walla-walla.wa.us/government/commissioners/agendas.php" target="_blank">https://www.co.walla-walla.wa.us/government/commissioners/agendas.php</a>
      </td>
    </tr>
    <tr>
      <td>Whitman</td>
      <td>Mon – 9:00 AM</td>
      <td colspan="2">
        <a href="https://www.whitmancounty.org/AgendaCenter/County-Commissioners-5" target="_blank">https://www.whitmancounty.org/AgendaCenter/County-Commissioners-5</a>
      </td>
    </tr>
    <tr>
      <td>Yakima</td>
      <td>Tues – 10:00 AM</td>
      <td colspan="2">
        <a href="https://www.yakimacounty.us/AgendaCenter/Board-of-Commissioners-2" target="_blank">https://www.yakimacounty.us/AgendaCenter/Board-of-Commissioners-2</a>
      </td>
    </tr>
  </tbody>
</table>

<br>
<div class="TEXT-ALIGN-CENTER">
    <span class="TEXT-BOLD">NOTE:</span> Dates and times subject to change. Contact county commissioners to confirm dates and times.
</div>
<br>

<div class="TEXT-ALIGN-CENTER">
    <span class="TEXT-BOLD">Errors? Corrections?</span>
  E-mail: <img class="IMAGE-ALIGN-VERTICAL" src="updates-e-mail-address.jpg" alt="Updates e-mail address image" title="Updates e-mail address" width="251" height="23">
    <br>
  Please provide as much detail as possible to ensure we make the right correction(s).
</div>
<br>

<div class="TEXT-ALIGN-CENTER">Page last updated: December 5, 2023</div>
<br>
</body>
</html>
paulp575
User avatar
Albert Wiersch
Site Admin
Posts: 3783
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Scrollable Table Headers

Post by Albert Wiersch »

You're welcome! I'm glad I was helpful. :D

Maybe one day Firefox will fix the issue/bug. :) But in your latest revision it's really not that noticeable.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
Post Reply