Column is collapsed to 0 width.

Discuss how to use and promote Web standards with the Mozilla Gecko engine.
Posts: 2
Joined: December 5th, 2014, 3:52 pm

Post Posted December 5th, 2014, 3:58 pm

Firefox 34.0.5 won't display a column in a table. There should be a second column named "Bar Number". I think the HTML/CSS is pretty simple. Any ideas? The missing column seems to be collapsed and has a width of 0. In full screen I can see part of it.

Code: Select all
.attorneys {
  table-layout: fixed;
  width: 100%;
  white-space: nowrap;
.attorneys td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
.row-caseCount {
  width: 8%;
.row-barNumber {
  width: 10%;
.row-name {
  width: 35%;
.row-caseTypes {
  width: 18%;
.row-partyTypes {
  width: 9%;
.row-coaTypes {
  width: 12%;
.row-subTypes {
  width: 8%;

Code: Select all
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="">
<link type="text/css" rel="stylesheet" href="/fic/javax.faces.resource/theme.css.jsf?ln=primefaces-aristo" />
<link type="text/css" rel="stylesheet" href="/fic/javax.faces.resource/css/screen.css.jsf" />
<link type="text/css" rel="stylesheet" href="/fic/javax.faces.resource/primefaces.css.jsf?ln=primefaces&amp;v=5.1" />
<script type="text/javascript" src="/fic/javax.faces.resource/jquery/jquery.js.jsf?ln=primefaces&amp;v=5.1"></script>
<script type="text/javascript" src="/fic/javax.faces.resource/jquery/jquery-plugins.js.jsf?ln=primefaces&amp;v=5.1"></script>
<script type="text/javascript" src="/fic/javax.faces.resource/primefaces.js.jsf?ln=primefaces&amp;v=5.1"></script>
  <a href="/fic/index.jsf">index</a>
  <form id="j_idt6" name="j_idt6" method="post" action="/fic/display2.jsf" enctype="application/x-www-form-urlencoded">
    <input type="hidden" name="j_idt6" value="j_idt6" />
    <div id="j_idt6:j_idt7" class="ui-datatable ui-widget attorneys">
      <div class="ui-datatable-header ui-widget-header ui-corner-top">San Francisco Family Law Attorneys</div>
      <div class="ui-datatable-tablewrapper">
        <table role="grid">
          <thead id="j_idt6:j_idt7_head">
            <tr role="row">
              <th id="j_idt6:j_idt7:j_idt9" class="ui-state-default row-1 row-caseCount" role="columnheader"><span
              <th id="j_idt6:j_idt7:j_idt11" class="ui-state-default" role="columnheader"><span class="ui-column-title">Bar
              <th id="j_idt6:j_idt7:j_idt14" class="ui-state-default row-3 row-name" role="columnheader"><span
              <th id="j_idt6:j_idt7:j_idt16" class="ui-state-default row-4 row-caseTypes" role="columnheader"><span
                class="ui-column-title">Case Types</span></th>
              <th id="j_idt6:j_idt7:j_idt19" class="ui-state-default row-5 row-partyTypes" role="columnheader"><span
                class="ui-column-title">Party Types</span></th>
              <th id="j_idt6:j_idt7:j_idt22" class="ui-state-default row-6 row-coaTypes" role="columnheader"><span
                class="ui-column-title">Causes of Action</span></th>
              <th id="j_idt6:j_idt7:j_idt25" class="ui-state-default row-7 row-subTypes" role="columnheader"><span
          <tfoot id="j_idt6:j_idt7_foot"></tfoot>
          <tbody id="j_idt6:j_idt7_data" class="ui-datatable-data ui-widget-content">
            <tr data-ri="0" class="ui-widget-content ui-datatable-even" role="row">
              <td role="gridcell" class="row-1 row-caseCount">2</td>
              <td role="gridcell">029037</td>
              <td role="gridcell" class="row-3 row-name">THORN, SUZIE S</td>
              <td role="gridcell" class="row-4 row-caseTypes">[ 2, , , , ]</td>
              <td role="gridcell" class="row-5 row-partyTypes">[ , 2]</td>
              <td role="gridcell" class="row-6 row-coaTypes">[ 1, 1, , ]</td>
              <td role="gridcell" class="row-7 row-subTypes">[ , ]</td>
    <script id="j_idt6:j_idt7_s" type="text/javascript">$(function(){"DataTable","widget_j_idt6_j_idt7",{id:"j_idt6:j_idt7",widgetVar:"widget_j_idt6_j_idt7"});});</script>
    <input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0"
      value="-7425820846277129776:-3917110269095489788" autocomplete="off" />
Last edited by knicholas on December 5th, 2014, 4:29 pm, edited 2 times in total.

New Member

User avatar
Posts: 40048
Joined: October 18th, 2007, 1:45 pm
Location: Next door to the west

Post Posted December 5th, 2014, 4:07 pm

Moving to Web Development
Post wrangler
"Choose between the Food Select Feature or other Functions. If no food or function is chosen, Toast is the default."


User avatar
Posts: 2633
Joined: June 9th, 2008, 10:53 am
Location: Near 37.501685 -80.147967

Post Posted December 6th, 2014, 8:56 am

Seems to work for me. All I did was copy/paste your code into two files and create an HTML.
I added width to the border and gray background for visibility, centered the first 3 column text. ... olumn.html
~ I'm only here to Pay it Forward. ~

"I often take a very long windy road to my destination. When I arrive I often wonder how I missed the shortcut".

Posts: 2
Joined: December 5th, 2014, 3:52 pm

Post Posted December 6th, 2014, 10:09 am

Yea, and today I can't reproduce it in a simple test setup I built so I could report it to PrimeFaces. Oh well, thanks for having a look. Next time I'll go try and go a little slower.

Return to Web Development / Standards Evangelism

Who is online

Users browsing this forum: No registered users and 1 guest