Solved

Table display

Posted on 2013-11-09
4
122 Views
Last Modified: 2013-11-24
Im trying to get a table to layout and look good.

My first problem was to get the body scrolling, but not the table header, which after reading an article discovered setting the table to display:block; which works great, the problem is that the columns now get all messed up:-
table
So if I remove display:block; my columns width are fine, but then my scroll fails.

I thought I could set each columns width using nth-child, but this doesnt seem to work.

So my CSS code stands at:-
#openTickets {
      width: 900px;
      top: 30px;
      left:50px;
      position: absolute;
      border: thin solid #494ECC;
      text-align: left;
}

#openTickets thead {
  text-align: center;
  background-color: #aaa;
}

#openTickets tbody {
    background-color:#ddd;
      text-align: left;
      height:400px;
      overflow-y: auto;
}

#openTickets td {
  padding: 3px 10px;
  border: thin solid #494ECC;
}

#openTickets td:nth-clild(0) { width:500px; }
#openTickets td:nth-clild(1) { width:150px; }
#openTickets td:nth-clild(2) { width:150px; }
#openTickets td:nth-clild(3) { width:150px; }
#openTickets td:nth-clild(4) { width:150px; }
#openTickets td:nth-clild(5) { width:300px; }
#openTickets td:nth-clild(6) { width:150px; }

thead >tr, tbody {
  display: block; 
}

Open in new window


and my HTML code stands at:-
<table id="openTickets">
  <thead>
    <td>Ticket</td>
    <td>User</td>
    <td>Company</td>
    <td>Location</td>
    <td>Subject</td>
    <td>Age</td>
    <td>AssignedTo</td>
  </thead>
  <tbody>
          <tr>
            <td>0</td><td>t</td><td>t</td><td>t</td><td>t</td><td>t</td><td>t</td>
          </tr>
          <tr>
            <td>1</td><td>t</td><td>t</td><td>t</td><td>t</td><td>t</td><td>t</td>
          </tr>
          <tr>
            <td>2</td><td>t</td><td>t</td><td>t</td><td>t</td><td>t</td><td>t</td>
          </tr>
          <tr>
            <td>3</td><td>t</td><td>t</td><td>t</td><td>t</td><td>t</td><td>t</td>
          </tr>
          <tr>
            <td>4</td><td>t</td><td>t</td><td>t</td><td>t</td><td>t</td><td>t</td>
          </tr>
          <tr>
            <td>5</td><td>t</td><td>t</td><td>t</td><td>t</td><td>t</td><td>t</td>
          </tr>
          <tr>
            <td>6</td><td>t</td><td>t</td><td>t</td><td>t</td><td>t</td><td>t</td>
          </tr>
          <tr>
            <td>7</td><td>t</td><td>t</td><td>t</td><td>t</td><td>t</td><td>t</td>
          </tr>
          <tr>
            <td>8</td><td>t</td><td>t</td><td>t</td><td>t</td><td>t</td><td>t</td>
          </tr>
          <tr>
            <td>9</td><td>t</td><td>t</td><td>t</td><td>t</td><td>t</td><td>t</td>
          </tr>
          <tr>
            <td>10</td><td>t</td><td>t</td><td>t</td><td>t</td><td>t</td><td>t</td>
          </tr>
          <tr>
            <td>11</td><td>t</td><td>t</td><td>t</td><td>t</td><td>t</td><td>t</td>
          </tr>
          <tr>
            <td>12</td><td>t</td><td>t</td><td>t</td><td>t</td><td>t</td><td>t</td>
          </tr>
          <tr>
            <td>13</td><td>t</td><td>t</td><td>t</td><td>t</td><td>t</td><td>t</td>
          </tr>
          <tr>
            <td>14</td><td>t</td><td>t</td><td>t</td><td>t</td><td>t</td><td>t</td>
          </tr>
          <tr>
            <td>15</td><td>t</td><td>t</td><td>t</td><td>t</td><td>t</td><td>t</td>
          </tr>
            </tbody>
</table>

Open in new window



Can someone advise me please on what to do to keep my scroll bars working, and set the widths of the coloums right?

Thank you
0
Comment
Question by:tonelm54
  • 2
4 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39635779
Setting dimensions for table elements is always problem matic because the specifications will be ignore to conform to content rather than layout.  The best way to do a table with fixed heading is to not use a table but rather used divs sytled as table elements

Then you get the positive parts of tables without some of the negatives.

If that does no work for you then post a link to the page and I will see if there are other options available.

Cd&
0
 
LVL 17

Expert Comment

by:nanharbison
ID: 39638424
You have the width of the table set to 900px, and then the width of the columns add up to more than that, unless I am not interpreting your CSS correctly. I usually do the lazy thing and set the width of the columns right in the table html, which usually works, unless you have an error in your numbers for cell widths.
  <thead>
    <td width="150px">Ticket</td>....
But am I reading the CSS incorrectly?
0
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 39638485
@nanharbison - the 'width' attribute for TD is deprecated in HTML 4.01 and not supported in HTML5 - you should switch to using CSS!
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39673342
@nanharbison,

Recommending the use of obsolete properties simply creates new or additional problems.  Most of the Experts on the site are trying to promote "best practice"; not quick hacks that  lead to pages that are doomed to fail at some point.

You will probably get called on it anytime you offer that kind of advice.

Cd&
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
SharePoint 2013 Searchbox Branding 11 113
Testing Responsiveness for Different Devices 4 36
Divi Theme - extra fonts I don't want 13 40
Change Firefox bookmarks menu font size 2 33
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question