Member Avatar for Ketul_1

Hi, I'm having a problem with a table:

I want the leader dots on only the 1st line (date........event)

  1. In September 4 section the leader dots are on the FIRST and LAST line. For the Second-last lines I thought if I created a new "tr" section (with different styling that would get rid of leader dots and vertical space). Obviously didn't work.

  2. So I tried another way in the September 8 section: but the leader dots are on LAST LINE ONLY!

<!DOCTYPE html>
<html>
<head>

<title>FFS Calendar</title>

<meta name="description" content="Frankford Friends School provides an affordable and quality Quaker education for grades Pre-K to 8 in Philadelphia. Established in 1833.">
<meta name="keywords" content="Quaker, Quaker school, Quaker education, affordable education, Frankford, Philadelphia, academics, teachers, faculty, staff, students, classes, principal, meeting, Pre-K, Kindergarten, to 8th grade, Pre-K to 8, library, literacy, social studies, mathematics, art, science, music, Spanish, physical education, early care, after school care, EITC tax credit, scholarships, funding" />
<meta charset="utf-8">

<link href="cmainstyle.css" rel="stylesheet" type="text/css">
<link href="navigationMar2014.css" rel="stylesheet" type="text/css">

<style type="text/css">
/* To make older browser HTML5 aware */
header, nav, aside, article, figure figcaption footer {display: block;}

/*mobile version w bkgrd COLOR only*/
@media all and (max-width:800px){
body{background-color:#fc6;} /*YELLOW*/
}
</style>

<style type="text/css">
/***for CALENDAR page only ***/
.dot-table {
border-collapse: separate;
border-spacing: 0 1em;
}
.dot-table td {
width:100%;
max-width:18.75em; /*300px*//*was 480px=30em*/
overflow:hidden;
white-space:nowrap;
vertical-align:top;
line-height:110%;
padding:0;
}
.dot-table td:first-child:after {
content:" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . "
}
td.right {
text-align:right;
vertical-align:top;
line-height:110%;
}

tr.clear {padding-bottom:0; margin-bottom:0;}
td.clear {
padding-top:0;
padding-bottom:0;
margin-top:0;
margin-bottom:0;
}
</style>

</head>

<body>

<div id="wrapper">

<!-- LEFT SIDEBAR -->
<aside>
<img src="/images2014/4girls-mar2014.jpg" alt="4 girls smiling">
<!--<figcaption></figcaption>-->

<!-- links -->
<aside class="sidebar">
<!-- SIDE LINKS -->
<hr class="topsiderule" />
<span class="sidetext"><a href="/2014site/contactFFS.html">Contact Us</a></span>
<hr class="siderule" />
<span class="sidetext"><a href="/2014site/calendarFFS.html" class="current">Calendar</a></span>
<hr class="siderule" />
<span class="sidetext"><a href="/2014site/directionsFFS.html">Directions</a></span>
<hr class="siderule" />
</aside>
<!-- END links -->
</aside>


<!-- ARTICLE -->
<article>
<span class="topicbar">• SCHOOL CALENDAR 2014–2015 •</span>

<p class="spacebefore">
<p style="font-size:11px; color:#339; font-weight:normal; text-align:center; margin-bottom:0;">No registration needed for the Open House events.</p>

<table class="dot-table">
<tr>
<td>Wednesday, September 3</td><td class="right">Pre-K/K Orientation</td>
</tr>
<tr>
<td>September 4,</td><td class="right">First Day of School</td>
</tr>
<tr class="clear">
<td class="clear">
   8:30 am: Pre-K/K<br />
   8:15 am: 1st–8th grade<br />
   Noon closing for all grades
</td>
<td></td>
</tr>

<!-- september 5 event goes here -->

<tr>
<td>Monday, September 8, <br />
   8:30 am: Pre-K/K<br />
   8:15 am: 1st–8th grade<br />
   2:45 pm closing for all grades
</td>
<td class="right">Classes begin, FULL DAY</td>
</tr>
</table>
</article><!-- END ARTICLE -->

</div><!-- END WRAPPER -->
</body>
</html>
  • 2 Contributors
  • 1 Reply
  • 598 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by cereal

Dani AI

Generated

Short version: the dots are coming from a pseudo-element that’s being applied wherever your selector matches. When you add the extra row for times (or use line breaks inside the date cell) the same selector hits that first cell again, so you get extra leader dots. The simplest, least-invasive fix is to target only the rows that should show leaders instead of every first cell.

A quick fix (minimal markup change): give the date/title row a class (for example class="leader") and change your selector to target only that row: tr.leader td:first-child::after. That stops any subsequent detail rows from getting the pseudo-element. This is the fastest way to get predictable behavior without reworking the table.

A better, responsive approach is to render the date + title as a single row (one td with colspan) and draw the leaders with an empty flex child whose background is a repeating dot pattern. It avoids long hard-coded dot strings and responds to different widths and fonts. Example:

<tr class="event">
  <td colspan="2">
    <div class="leader">
      <span class="date">September 4</span>
      <span class="fill" aria-hidden="true"></span>
      <span class="title">First Day of School</span>
    </div>
  </td>
</tr>
<tr class="details">
  <td colspan="2">
    8:30 am: Pre-K/K<br/>
    8:15 am: 1st–8th grade<br/>
    Noon closing for all grades
  </td>
</tr>
.leader { display:flex; align-items:center; }
.leader .date, .leader .title { white-space:nowrap; }
.leader .fill {
  flex:1;
  height:2px;
  margin:0 .5em;
  background-image: radial-gradient(circle, #000 50%, rgba(0,0,0,0) 51%);
  background-size:6px 2px;
  background-repeat:repeat-x;
}

Notes: mark the decorative .fill as aria-hidden="true" so screen readers skip it. Also test at narrow widths — if you must support very old browsers, provide a simple fallback (solid or dashed line). ’s idea of separating the heading from the detail lines is sound; the class-based or flex approaches above make that separation reliable and responsive for future edits.

Member Avatar for cereal

On september 8 the dots are in the first row, only apparently are in the last, because you're using <br /> on the first child to add new lines, and the second td is floating right.

On september 4 the issue is similar. Try to change the table like this:

<!-- september 3 -->
<table class="table">
    <thead>
        <tr>
            <th>
                Wednesday, September 3
            </th>
            <th>
                Pre-K/K Orientation
            </th>
        </tr>
    <tbody>
        <tr>
            <td></td>
            <td></td>
        </tr>
</table>

<!-- september 4 -->
<table class="table">
    <thead>
        <tr>
            <th>
                September 4,
            </th>
            <th>
                First Day of School
            </th>
        </tr>
    <tbody>
        <tr>
            <td>
                <ul>
                    <li>8:30 am: Pre-K/K</li>
                    <li>8:15 am: 1st&#8211;8th&nbsp;grade</li>
                    <li>Noon closing for all grades</li>
                </ul>
            </td>
            <td></td>
        </tr>
</table>

<!-- september 8 -->
<table class="table">
    <thead>
        <tr>
            <th>
                Monday, September 8,
            </th>
            <th>
                Classes begin, FULL DAY
            </th>
        </tr>
    <tbody>
        <tr>
            <td>
                <ul>
                    <li>8:30 am: Pre-K/K</li>
                    <li>8:15 am: 1st&#8211;8th&nbsp;grade</li>
                    <li>2:45 pm closing for all grades</li>
                </ul>
            </td>
            <td></td>
        </tr>
</table>

And the CSS to:

<style type="text/css">

    .table
    {
        margin:1em;
    }

    .table thead tr th
    {
        width:100%;
        max-width:18.75em;
        overflow:hidden;
        white-space:nowrap;
        vertical-align:top;
        line-height:110%;
        padding:0;
    }

    .table thead tr th:first-child:after
    {
        content:" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";
    }

    .table ul
    {
        list-style:none;
        margin:1em 0;
        padding:0;
    }

</style>

Live example: http://jsfiddle.net/6hPPL/

Bye!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.