Allow element to overflow in table with table-layout:fixed

Question

A few threads exist on this topic but none of them have worked for me.

I have a HTML table element containing standard rows and columns, and I am trying to introduce subheaders to break up the data. The subheader needs to overlap (overflow into) a few columns to the right of it as it will often be wider than the first data column

Here's the table

.REMOVETHISANDITWILLWORK {
  /*display:none;*/
}


.datatable {
  outline: none;
  font-size: 8pt;
  /* stop chrome highlighting table which is focussed to allow key scrolling */
}

.datatable>.scrollingdiv {
  overflow-y: scroll;
  overflow-x: auto;
}

/* record selectors in first td */

.datatable>.scrollingdiv>table>tbody>tr>td:first-child {
  width: 16px;
  background-color: #eee;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

.datatable table {
  table-layout: fixed;
  border-collapse: collapse;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: top;
  text-align: left;
}

.datatable .scrollingdiv tr {
  height: 21px;
  vertical-align: middle;
  border-bottom: 1px solid #f0f0f0;
  border-right: 1px solid #f0f0f0;
}

.datatable .scrollingdiv td {
  overflow: hidden;
  padding: 1px 0 1px 2px;
  border-right: 1px solid #ccc;
  min-height: 13px;
}


.datatable .scrollingdiv tr.trh {
  border-top: 1px solid #777;
  border-bottom: 1px solid #777;
}

.datatable .scrollingdiv .trh td {
  border-right: none;
  background-color: #f4f7fd;
  cursor: default;
}

td.th>div {}

td.th1 {
  font-weight: bold;
}

.th2 {
  font-weight: bold;
}


  
    
      
        
          
          Contracts
        
        
          
          Contracts - Hardware Maintenance Contract
        
        
          
          1622
          IBM Hardware Maintenance Contract 2018-2019
          00534211
          Default Custodian
          Hardware Maintenance Contract
          
          
          
          Default Department
          Default Location
          
          Default Cost Centre
          Contracts
          1
        
        
          
          Contracts - Lease
        
        
          
          1621
          Server Lease 2018-2019
          00534210
          Default Custodian
          Lease
          
          
          
          Default Department
          Default Location
          
          Default Cost Centre
          Contracts
          1
        
        
          
          Contracts - Software License Agreement
        
        
          
          1307
          Corporate SPLA Standard Enrollment 938746
          00533896
          Default Custodian
          Software License Agreement
          938746
          
          
          Default Department
          Default Location
          
          Default Cost Centre
          Contracts
          1
        
        
          
          1308
          Standard OPEN License Confirmation Number 127543
          00533897
          Default Custodian
          Software License Agreement
          127543
          
          
          Default Department
          Default Location
          
          Default Cost Centre
          Contracts
          1

In the above the headers display, but its ignored column width and every column has the same width.

When the subheader td's exist the columns in the data lose their width even though its stamped on each TD with a style.

When the subheader td's do not exist or are hidden with display:none (uncomment that bit of css to try it), the columns in the table now size correctly respecting the width specified in style

Its all to do with the formatting of the first row - if we hide the first row, even if subsequent subheaders exist, it works ok. But of course the whole point of headers is you need them at the top.

I've tried giving subheader rows the same number of TD's as the data rows, and the same "width styling", but I then can't get the text to flow out of its TD so it gets chopped. It nearly works with display:inline; on that TD - but that makes the first column in the data rows disappear.

Here's the snippet with the columns how they should be, but the first subheaderrows had to be removed:

.datatable {
  outline: none;
  font-size: 8pt;
  /* stop chrome highlighting table which is focussed to allow key scrolling */
}

.datatable>.scrollingdiv {
  overflow-y: scroll;
  overflow-x: auto;
}

/* record selectors in first td */

.datatable>.scrollingdiv>table>tbody>tr>td:first-child {
  width: 16px;
  background-color: #eee;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

.datatable table {
  table-layout: fixed;
  border-collapse: collapse;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: top;
  text-align: left;
}

.datatable .scrollingdiv tr {
  height: 21px;
  vertical-align: middle;
  border-bottom: 1px solid #f0f0f0;
  border-right: 1px solid #f0f0f0;
}

.datatable .scrollingdiv td {
  overflow: hidden;
  padding: 1px 0 1px 2px;
  border-right: 1px solid #ccc;
  min-height: 13px;
}


.datatable .scrollingdiv tr.trh {
  border-top: 1px solid #777;
  border-bottom: 1px solid #777;
}

.datatable .scrollingdiv .trh td {
  border-right: none;
  background-color: #f4f7fd;
  cursor: default;
}

td.th>div {}

td.th1 {
  font-weight: bold;
}

.th2 {
  font-weight: bold;
}


  
    
      
        
          
          1622
          IBM Hardware Maintenance Contract 2018-2019
          00534211
          Default Custodian
          Hardware Maintenance Contract
          
          
          
          Default Department
          Default Location
          
          Default Cost Centre
          Contracts
          1
        
        
          
          Contracts - Lease
        
        
          
          1621
          Server Lease 2018-2019
          00534210
          Default Custodian
          Lease
          
          
          
          Default Department
          Default Location
          
          Default Cost Centre
          Contracts
          1
        
        
          
          Contracts - Software License Agreement
        
        
          
          1307
          Corporate SPLA Standard Enrollment 938746
          00533896
          Default Custodian
          Software License Agreement
          938746
          
          
          Default Department
          Default Location
          
          Default Cost Centre
          Contracts
          1
        
        
          
          1308
          Standard OPEN License Confirmation Number 127543
          00533897
          Default Custodian
          Software License Agreement
          127543
          
          
          Default Department
          Default Location
          
          Default Cost Centre
          Contracts
          1

In the above, the columns have the correct width, but we had to remove the first headers to achieve this.

And finally I hope, here's the fiddle with the first subheader row mimicing the data rows - if we can get the text in "This is a long header chopped" to flow out of its TD without messing up the rest of the table, that will do the job.

.datatable {
  outline: none;
  font-size: 8pt;
  /* stop chrome highlighting table which is focussed to allow key scrolling */
}

.datatable>.scrollingdiv {
  overflow-y: scroll;
  overflow-x: auto;
}

/* record selectors in first td */

.datatable>.scrollingdiv>table>tbody>tr>td:first-child {
  width: 16px;
  background-color: #eee;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

.datatable table {
  table-layout: fixed;
  border-collapse: collapse;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: top;
  text-align: left;
}

.datatable .scrollingdiv tr {
  height: 21px;
  vertical-align: middle;
  border-bottom: 1px solid #f0f0f0;
  border-right: 1px solid #f0f0f0;
}

.datatable .scrollingdiv td {
  overflow: hidden;
  padding: 1px 0 1px 2px;
  border-right: 1px solid #ccc;
  min-height: 13px;
}


.datatable .scrollingdiv tr.trh {
  border-top: 1px solid #777;
  border-bottom: 1px solid #777;
}

.datatable .scrollingdiv .trh td {
  border-right: none;
  background-color: #f4f7fd;
  cursor: default;
}

td.th>div {}

td.th1 {
  font-weight: bold;
}

.th2 {
  font-weight: bold;
}


  
    
      
        
          
          This is a longer header chopped
          
          
          
          
          
          
          
          
          
          
          
          
          
        
        
          
          1622
          IBM Hardware Maintenance Contract 2018-2019
          00534211
          Default Custodian
          Hardware Maintenance Contract
          
          
          
          Default Department
          Default Location
          
          Default Cost Centre
          Contracts
          1
        
        
          
          Contracts - Lease
        
        
          
          1621
          Server Lease 2018-2019
          00534210
          Default Custodian
          Lease
          
          
          
          Default Department
          Default Location
          
          Default Cost Centre
          Contracts
          1
        
        
          
          Contracts - Software License Agreement
        
        
          
          1307
          Corporate SPLA Standard Enrollment 938746
          00533896
          Default Custodian
          Software License Agreement
          938746
          
          
          Default Department
          Default Location
          
          Default Cost Centre
          Contracts
          1
        
        
          
          1308
          Standard OPEN License Confirmation Number 127543
          00533897
          Default Custodian
          Software License Agreement
          127543
          
          
          Default Department
          Default Location
          
          Default Cost Centre
          Contracts
          1

In the above, the columns have the correct width, and the headers are displaying, but the top header is getting chopped because it can only be as wide as the first TD.

seantunwin · Accepted Answer

Changing the td to a th will solve the issue.

Change:

This is a longer header chopped

To:

This is a longer header chopped

.datatable {
  outline: none;
  font-size: 8pt;
  /* stop chrome highlighting table which is focussed to allow key scrolling */
}

.datatable>.scrollingdiv {
  overflow-y: scroll;
  overflow-x: auto;
}

/* record selectors in first td */

.datatable>.scrollingdiv>table>tbody>tr>td:first-child {
  width: 16px;
  background-color: #eee;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

.datatable table {
  table-layout: fixed;
  border-collapse: collapse;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: top;
  text-align: left;
}

.datatable .scrollingdiv tr {
  height: 21px;
  vertical-align: middle;
  border-bottom: 1px solid #f0f0f0;
  border-right: 1px solid #f0f0f0;
}

.datatable .scrollingdiv td {
  overflow: hidden;
  padding: 1px 0 1px 2px;
  border-right: 1px solid #ccc;
  min-height: 13px;
}


.datatable .scrollingdiv tr.trh {
  border-top: 1px solid #777;
  border-bottom: 1px solid #777;
}

.datatable .scrollingdiv .trh td {
  border-right: none;
  background-color: #f4f7fd;
  cursor: default;
}

td.th>div {}

td.th1 {
  font-weight: bold;
}

.th2 {
  font-weight: bold;
}


  
    
      
        
          
          This is header is NO longer chopped
          
          
          
          
          
          
          
          
          
          
          
          
             
        
        
          
          1622
          IBM Hardware Maintenance Contract 2018-2019
          00534211
          Default Custodian
          Hardware Maintenance Contract
          
          
          
          Default Department
          Default Location
          
          Default Cost Centre
          Contracts
          1
        
        
          
          Contracts - Lease
        
        
          
          1621
          Server Lease 2018-2019
          00534210
          Default Custodian
          Lease
          
          
          
          Default Department
          Default Location
          
          Default Cost Centre
          Contracts
          1
        
        
          
          Contracts - Software License Agreement
        
        
          
          1307
          Corporate SPLA Standard Enrollment 938746
          00533896
          Default Custodian
          Software License Agreement
          938746
          
          
          Default Department
          Default Location
          
          Default Cost Centre
          Contracts
          1
        
        
          
          1308
          Standard OPEN License Confirmation Number 127543
          00533897
          Default Custodian
          Software License Agreement
          127543
          
          
          Default Department
          Default Location
          
          Default Cost Centre
          Contracts
          1

Allow element to overflow in table with table-layout:fixed

Answers (1)

Related Questions