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!

Click Here

<!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
  • 539 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by cereal
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.