Table - Basic style

When to Use

This table is used for the display of data.

Functionality

Not applicable.

Rendered Code

Practice Name	City	State	Zip	Status
Best Skin Care Dermatology	Portsmouth	NH	12323	Training
Johnson & Mueller	New Port Richey	FL	43545	Training
Skin Care Associates	Chestnut Hill	MA	02232	Training
Massachusetts General Dermatology Practice	New Bedford	MA	02242	Training

HTML

	
		
			
				
					Practice Name
				
				
					City
				
				
					State
				
				
					Zip
				
				
					Status
				
			
		
		
			
				Best Skin Care Dermatology
				Portsmouth
				NH
				12323
				Training
			
			
				Johnson & Mueller
				New Port Richey
				FL
				43545
				Training
			
			
				Skin Care Associates
				Chestnut Hill
				MA
				02232
				Training
			
			
				Massachusetts General Dermatology Practice
				New Bedford
				MA
				02242
				Training

CSS

.table-basic {
  border: 0;
  border-collapse: separate;
  border-left: 0;
  border-radius: 0;
  border-spacing: 0;
  box-sizing: border-box;
  margin: 0;
  width: 100%;
}
.table-basic th,
.table-basic td {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
  -ms-text-overflow: ellipsis;
  white-space: nowrap;
}
.table-basic th div,
.table-basic td div {
  white-space: normal;
}
.table-basic a {
  color: #141F48;
  text-decoration: underline;
}
.table-basic tbody {
  background-color: #f8f8f8;
  color: #404040;
}
.table-basic tbody tr:hover > td,
.table-basic tbody tr:hover > th {
  background-color: #ebebeb;
}
.table-basic tbody tr.odd {
  background-color: #fff;
}
.table-basic tbody tr.odd:hover > td {
  background-color: #f2f2f2;
}
.table-basic thead:first-of-type tr:first-child > th:first-child {
  border-top-left-radius: 0;
}
.table-basic thead:first-of-type tr:first-child > th:last-child {
  border-top-right-radius: 0;
}
.table-basic tbody:last-child tr:last-child > td:first-child {
  border-bottom-left-radius: 0;
}
.table-basic tbody:last-child tr:last-child > td:last-child {
  border-bottom-right-radius: 0;
}
.table-basic thead th {
  background-color: #e7f2d9;
  border-bottom: 0;
  border-left: 0;
  border-right: 0;
  color: #141F48;
  font-size: 14px;
  padding: 12px 25px 11px 25px;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
.table-basic thead th:first-child {
  border-left: 0;
}
.table-basic thead th a {
  color: #141F48;
  text-decoration: none;
}
.table-basic tbody {
  background-color: #f8f8f8;
}
.table-basic tbody tr.has-subrow:hover {
  cursor: pointer;
}
.table-basic tbody tr.subrow td {
  margin: 0;
  padding: 0;
}
.table-basic tbody tr.subrow.subrow-open {
  background: #e7f2d9;
}
.table-basic tbody tr.active td:first-child {
  background-image: url("../Images/bg-table-active.gif");
  background-repeat: repeat-y;
}
.table-basic tbody td {
  border-bottom: 1px solid #ccc;
  border-left: 0;
  border-right: 0;
  line-height: 1.25em;
  padding: 21px 25px;
  white-space: nowrap;
}
.table-basic tbody td:first-child {
  border-left: 0;
}

/* Tables - CSS for LT IE9 */
.lt-ie9 .table-basic,
.lt-ie10 .table-basic {
  width: 100%;
}
.lt-ie9 .table-basic th, .lt-ie9 .table-basic td,
.lt-ie10 .table-basic th,
.lt-ie10 .table-basic td {
  max-width: 300px;
  overflow: ellipsis;
  -ms-text-overflow: ellipsis;
  white-space: normal;
  width: auto;
}

JavaScript

// No JavaScript Required

Table - Example with long text

When to Use

This table is used for the display of data. Cells with overflowing content will show an ellipsis. All cells will be spaced evenly unless you set an explicit width on a th.

Functionality

Not applicable.

Rendered Code

Patient Name	Practice Name	HCP Name	State	Region	Submitted	Assigned	Processing
Thomas Smith	Clinical PA Demo Practice	Emerson Dominique	IN	M-W	05/03/16 +0h	Pending with PSP	+0h
Thomas Smith	Clinical PA Demo Practice	Emerson Dominique	IN	M-W	05/03/16 +0h	Pending with PSP	+0h
Thomas Smith	Clinical PA Demo Practice	Emerson Dominique	IN	M-W	05/03/16 +36h	Pending with PSP	+12h
Thomas Smith	Clinical PA Demo Practice	Emerson Dominique	IN	M-W	05/03/16 +0h	Pending with PSP	+0h

Previous First

Displaying Page: of 100

Last Next

HTML


		
			
				
					Item
				
				
					Item
				
				
					Item
				
				
					Item
				
				
					Item
				
			
		
		
			
				This is an example of a cell that contains longer than usual text. Having longer content may make using a scrollbar helpful.
				New Port Richey, Florida
				New York
				89175
				Training and Longer Word
			
			
				Sutton-under-Whitestonecliffe
				Pak Phanang Fang Tawan Tok, Pak Phanang District, Nakhon Si Thammarat
				Thailand
				89175
				Training
			
			
				Pfaffenschlag bei Waidhofen an der Thaya
				Slovenska Narodna Podporna Jednota
				Pennsylvania
				89175
				Training
			
			
				San Fernando del Valle de Catamarca 
				Kinney and Gourlays Improved City Plat
				NY
				89175
				Training
			
		
		
		
		
			
				

					
						Previous
						First					
					

					
						Displaying Page:
						
						of 100					
					

					
						Last
						Next

Item	Item	Item	Item	Item
This is an example of a cell that contains longer than usual text. Having longer content may make using a scrollbar helpful.	New Port Richey, Florida	New York	89175	Training and Longer Word
Sutton-under-Whitestonecliffe	Pak Phanang Fang Tawan Tok, Pak Phanang District, Nakhon Si Thammarat	Thailand	89175	Training
Pfaffenschlag bei Waidhofen an der Thaya	Slovenska Narodna Podporna Jednota	Pennsylvania	89175	Training
San Fernando del Valle de Catamarca	Kinney and Gourlays Improved City Plat	NY	89175	Training

CSS

.table-basic {
  border: 0;
  border-collapse: separate;
  border-left: 0;
  border-radius: 0;
  border-spacing: 0;
  box-sizing: border-box;
  margin: 0;
  width: 100%;
}
.table-basic th,
.table-basic td {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
  -ms-text-overflow: ellipsis;
  white-space: nowrap;
}
.table-basic th div,
.table-basic td div {
  white-space: normal;
}
.table-basic a {
  color: #141F48;
  text-decoration: underline;
}
.table-basic tbody {
  background-color: #f8f8f8;
  color: #404040;
}
.table-basic tbody tr:hover > td,
.table-basic tbody tr:hover > th {
  background-color: #ebebeb;
}
.table-basic tbody tr.odd {
  background-color: #fff;
}
.table-basic tbody tr.odd:hover > td {
  background-color: #f2f2f2;
}
.table-basic thead:first-of-type tr:first-child > th:first-child {
  border-top-left-radius: 0;
}
.table-basic thead:first-of-type tr:first-child > th:last-child {
  border-top-right-radius: 0;
}
.table-basic tbody:last-child tr:last-child > td:first-child {
  border-bottom-left-radius: 0;
}
.table-basic tbody:last-child tr:last-child > td:last-child {
  border-bottom-right-radius: 0;
}
.table-basic thead th {
  background-color: #e7f2d9;
  border-bottom: 0;
  border-left: 0;
  border-right: 0;
  color: #141F48;
  font-size: 14px;
  padding: 12px 25px 11px 25px;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
.table-basic thead th:first-child {
  border-left: 0;
}
.table-basic thead th a {
  color: #141F48;
  text-decoration: none;
}
.table-basic tbody {
  background-color: #f8f8f8;
}
.table-basic tbody tr.has-subrow:hover {
  cursor: pointer;
}
.table-basic tbody tr.subrow td {
  margin: 0;
  padding: 0;
}
.table-basic tbody tr.subrow.subrow-open {
  background: #e7f2d9;
}
.table-basic tbody tr.active td:first-child {
  background-image: url("../Images/bg-table-active.gif");
  background-repeat: repeat-y;
}
.table-basic tbody td {
  border-bottom: 1px solid #ccc;
  border-left: 0;
  border-right: 0;
  line-height: 1.25em;
  padding: 21px 25px;
  white-space: nowrap;
}
.table-basic tbody td:first-child {
  border-left: 0;
}

/* Tables - CSS for LT IE9 */
.lt-ie9 .table-basic,
.lt-ie10 .table-basic {
  width: 100%;
}
.lt-ie9 .table-basic th, .lt-ie9 .table-basic td,
.lt-ie10 .table-basic th,
.lt-ie10 .table-basic td {
  max-width: 300px;
  overflow: ellipsis;
  -ms-text-overflow: ellipsis;
  white-space: normal;
  width: auto;
}

JavaScript

// No JavaScript Required

Pagination Bar

When to Use

This table is used for the display of data.

Functionality

Not applicable.

Rendered Code

First Previous

Displaying Page: of 100

Next Last

HTML

	
		
			
				

					
						Previous
						First					
					

					
						Displaying Page:
						
						of 100					
					

					
						Last
						Next

CSS

/* Pagination */
.table-pagination .controls-left,
.table-pagination .controls-center,
.table-pagination .controls-right {
  float: left;
  display: block;
  margin-right: 2.35765%;
  width: 31.76157%;
  padding: 15px 0;
}
.table-pagination .controls-left:last-child,
.table-pagination .controls-center:last-child,
.table-pagination .controls-right:last-child {
  margin-right: 0;
}
.table-pagination .controls-center {
  color: #404040;
  padding: 15px 0 0 0;
  text-align: center;
}
.table-pagination .controls-center input {
  display: inline-block;
  height: auto;
  margin: 0;
  width: auto;
}
.table-pagination .controls-right {
  text-align: right;
  margin-right: 0;
}
.table-pagination .controls-right .btn {
  text-align: right;
}
.table-pagination .btn {
  margin-top: 0;
  margin-bottom: 0;
  text-decoration: inherit;
}

JavaScript

// No JavaScript Required

Table - Example with accordion subrow

When to Use

This shows an example of a table with an opened row.

Functionality

Subrows will be closed by default. If you want to load a page with the subrow opened, add the class .subrow-open.

Example: <tr class="subrow subrow-open">

Rendered Code

Suite Location	Date	Time	Activity Type	Mode	Status
25 Pilgrim Road, Belmont, MA 02478	06/15/16	2:30pm EST	Registration Follow Up	In person	Confirmed
This table has a subrow	04/28/16	1pm EST	Initial Training	In person	Confirmed
Subrow content can go here.
This table has a subrow	04/28/16	1pm EST	Initial Training	In person	Confirmed
Subrow content can go here.

HTML


	
		
			
				Suite Location
			
			
				Date
			
			
				Time
			
			
				Activity Type
			
			
				Mode
			
			
				Status
							
		
	
	
		
			25 Pilgrim Road, Belmont, MA 02478
			06/15/16
			2:30pm EST
			Registration Follow Up
			In person
			Confirmed				
					
		
			This table has a subrow
			04/28/16
			1pm EST
			Initial Training
			In person
			Confirmed				
		
		
			
				
					Subrow content can go here.
				
			
		
		
			25 Pilgrim Road, Belmont, MA 02478
			06/15/16
			2:30pm EST
			Registration Follow Up
			In person
			Confirmed				
			
		
			This table has a subrow
			04/28/16
			1pm EST
			Initial Training
			In person
			Confirmed				
		
		
			
				
					Subrow content can go here.

CSS

.table-basic {
  border: 0;
  border-collapse: separate;
  border-left: 0;
  border-radius: 0;
  border-spacing: 0;
  box-sizing: border-box;
  margin: 0;
  width: 100%;
}
.table-basic th,
.table-basic td {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
  -ms-text-overflow: ellipsis;
  white-space: nowrap;
}
.table-basic th div,
.table-basic td div {
  white-space: normal;
}
.table-basic a {
  color: #141F48;
  text-decoration: underline;
}
.table-basic tbody {
  background-color: #f8f8f8;
  color: #404040;
}
.table-basic tbody tr:hover > td,
.table-basic tbody tr:hover > th {
  background-color: #ebebeb;
}
.table-basic tbody tr.odd {
  background-color: #fff;
}
.table-basic tbody tr.odd:hover > td {
  background-color: #f2f2f2;
}
.table-basic thead:first-of-type tr:first-child > th:first-child {
  border-top-left-radius: 0;
}
.table-basic thead:first-of-type tr:first-child > th:last-child {
  border-top-right-radius: 0;
}
.table-basic tbody:last-child tr:last-child > td:first-child {
  border-bottom-left-radius: 0;
}
.table-basic tbody:last-child tr:last-child > td:last-child {
  border-bottom-right-radius: 0;
}
.table-basic thead th {
  background-color: #e7f2d9;
  border-bottom: 0;
  border-left: 0;
  border-right: 0;
  color: #141F48;
  font-size: 14px;
  padding: 12px 25px 11px 25px;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
.table-basic thead th:first-child {
  border-left: 0;
}
.table-basic thead th a {
  color: #141F48;
  text-decoration: none;
}
.table-basic tbody {
  background-color: #f8f8f8;
}
.table-basic tbody tr.has-subrow:hover {
  cursor: pointer;
}
.table-basic tbody tr.subrow td {
  margin: 0;
  padding: 0;
}
.table-basic tbody tr.subrow.subrow-open {
  background: #e7f2d9;
}
.table-basic tbody tr.active td:first-child {
  background-image: url("../Images/bg-table-active.gif");
  background-repeat: repeat-y;
}
.table-basic tbody td {
  border-bottom: 1px solid #ccc;
  border-left: 0;
  border-right: 0;
  line-height: 1.25em;
  padding: 21px 25px;
  white-space: nowrap;
}
.table-basic tbody td:first-child {
  border-left: 0;
}

/* Tables - CSS for LT IE9 */
.lt-ie9 .table-basic,
.lt-ie10 .table-basic {
  width: 100%;
}
.lt-ie9 .table-basic th, .lt-ie9 .table-basic td,
.lt-ie10 .table-basic th,
.lt-ie10 .table-basic td {
  max-width: 300px;
  overflow: ellipsis;
  -ms-text-overflow: ellipsis;
  white-space: normal;
  width: auto;
}

JavaScript

// No JavaScript Required

Table - Example with Signatures

When to Use

This shows an example of a table that uses signatures inside table cells.

Functionality

Not applicable.

Rendered Code

First Name	Last Name	Specialty	Username	NPI Number	Signed
Julia	Hughes	Gastroenterology	jhughes	19829966835
Joshua	Clarkson	Gastroenterology	jclarkson	13029968935	Request Sent
Cameron	Burgess	Gastroenterology	cburgess	18492924522
Julia	Hughes	Gastroenterology	jhughes	19829966835
Joshua	Clarkson	Gastroenterology	jclarkson	13029968935	Request Sent

HTML


	
		
			
				First Name
			
			
				Last Name
			
			
				Specialty
			
			
				Username
			
			
				NPI Number
			
			
				Signed
							
		
	
	
		
			Julia
			Hughes
			Gastroenterology
			jhughes
			19829966835
							
		
		
			Joshua
			Clarkson
			Gastroenterology
			jclarkson
			13029968935
			Request Sent				
			
		
			Cameron
			Burgess
			Gastroenterology
			cburgess
			18492924522
							
				
		
			Julia
			Hughes
			Gastroenterology
			jhughes
			19829966835
							
		
		
			Joshua
			Clarkson
			Gastroenterology
			jclarkson
			13029968935
			Request Sent

CSS

.table-basic {
  border: 0;
  border-collapse: separate;
  border-left: 0;
  border-radius: 0;
  border-spacing: 0;
  box-sizing: border-box;
  margin: 0;
  width: 100%;
}
.table-basic th,
.table-basic td {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
  -ms-text-overflow: ellipsis;
  white-space: nowrap;
}
.table-basic th div,
.table-basic td div {
  white-space: normal;
}
.table-basic a {
  color: #141F48;
  text-decoration: underline;
}
.table-basic tbody {
  background-color: #f8f8f8;
  color: #404040;
}
.table-basic tbody tr:hover > td,
.table-basic tbody tr:hover > th {
  background-color: #ebebeb;
}
.table-basic tbody tr.odd {
  background-color: #fff;
}
.table-basic tbody tr.odd:hover > td {
  background-color: #f2f2f2;
}
.table-basic thead:first-of-type tr:first-child > th:first-child {
  border-top-left-radius: 0;
}
.table-basic thead:first-of-type tr:first-child > th:last-child {
  border-top-right-radius: 0;
}
.table-basic tbody:last-child tr:last-child > td:first-child {
  border-bottom-left-radius: 0;
}
.table-basic tbody:last-child tr:last-child > td:last-child {
  border-bottom-right-radius: 0;
}
.table-basic thead th {
  background-color: #e7f2d9;
  border-bottom: 0;
  border-left: 0;
  border-right: 0;
  color: #141F48;
  font-size: 14px;
  padding: 12px 25px 11px 25px;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
.table-basic thead th:first-child {
  border-left: 0;
}
.table-basic thead th a {
  color: #141F48;
  text-decoration: none;
}
.table-basic tbody {
  background-color: #f8f8f8;
}
.table-basic tbody tr.has-subrow:hover {
  cursor: pointer;
}
.table-basic tbody tr.subrow td {
  margin: 0;
  padding: 0;
}
.table-basic tbody tr.subrow.subrow-open {
  background: #e7f2d9;
}
.table-basic tbody tr.active td:first-child {
  background-image: url("../Images/bg-table-active.gif");
  background-repeat: repeat-y;
}
.table-basic tbody td {
  border-bottom: 1px solid #ccc;
  border-left: 0;
  border-right: 0;
  line-height: 1.25em;
  padding: 21px 25px;
  white-space: nowrap;
}
.table-basic tbody td:first-child {
  border-left: 0;
}

/* Tables - CSS for LT IE9 */
.lt-ie9 .table-basic,
.lt-ie10 .table-basic {
  width: 100%;
}
.lt-ie9 .table-basic th, .lt-ie9 .table-basic td,
.lt-ie10 .table-basic th,
.lt-ie10 .table-basic td {
  max-width: 300px;
  overflow: ellipsis;
  -ms-text-overflow: ellipsis;
  white-space: normal;
  width: auto;
}

JavaScript

// No JavaScript Required

Table - Example with Signatures and Open Subrow

When to Use

This shows an example of a table with Signature Authorization open in a subrow.

Functionality

The subrow is opened when a user clicks the table row associated with it.

Rendered Code

First Name	Last Name	Specialty	Username	NPI Number	Signed
Julia	Hughes	Gastroenterology	jhughes	19829966835
Joshua	Clarkson	Gastroenterology	jclarkson	13029968935	Request Sent
Cameron	Burgess	Gastroenterology	cburgess	18492924522
First Name ^* Last Name ^* Cell Number ^* NPI Number ^* Primary Specialty Designation I authorize Pharmacy Solutions and its employees to serve as my agent for the sole purpose of obtaining patient benefit information and the necessary prior authorization forms when dealing with health plans and Pharmacy Benefits Managers (PBMs), if the plan or PBM requires such authorization. I do not authorize Pharmacy Solutions and its employees to serve as my agent for the sole purpose of obtaining patient benefit information and the necessary prior authorization forms when dealing with health plans and Pharmacy Benefits Managers (PBMs), if the plan or PBM requires such authorization. I acknowledge and understand that I may not obtain patient benefit information and prior authorization forms from certain Health Plans and PBMs.
Julia	Hughes	Gastroenterology	jhughes	19829966835
Joshua	Clarkson	Gastroenterology	jclarkson	13029968935	Request Sent

HTML


	
		
			
				First Name
			
			
				Last Name
			
			
				Specialty
			
			
				Username
			
			
				NPI Number
			
			
				Signed
							
		
	
	
		
			Julia
			Hughes
			Gastroenterology
			jhughes
			19829966835
							
		
		
			Joshua
			Clarkson
			Gastroenterology
			jclarkson
			13029968935
			Request Sent				
			
		
			Cameron
			Burgess
			Gastroenterology
			cburgess
			18492924522
							
			
		
			
				
					
						
							First Name ^*
							
						
						
							Last Name ^*
							
							
						
						    Cell Number ^*
						    
						    
						    
							
						
							NPI Number ^*
							
							

						
							Primary Specialty
							
													

						
							Designation
							
							
																									
					
					
						
							
							
							
						
						
							
							    
							        
							            
							            I authorize Pharmacy Solutions and its employees to serve as my agent for the sole purpose of obtaining patient benefit information and the necessary prior authorization forms when dealing with health plans and Pharmacy Benefits Managers (PBMs), if the plan or PBM requires such authorization.
							        
							        
							            
							            I do not authorize Pharmacy Solutions and its employees to serve as my agent for the sole purpose of obtaining patient benefit information and the necessary prior authorization forms when dealing with health plans and Pharmacy Benefits Managers (PBMs), if the plan or PBM requires such authorization. I acknowledge and understand that I may not obtain patient benefit information and prior authorization forms from certain Health Plans and PBMs.
							        
							    
														
						
					
				
			
						
		
			Julia
			Hughes
			Gastroenterology
			jhughes
			19829966835
							
		
		
			Joshua
			Clarkson
			Gastroenterology
			jclarkson
			13029968935
			Request Sent

CSS

.table-basic {
  border: 0;
  border-collapse: separate;
  border-left: 0;
  border-radius: 0;
  border-spacing: 0;
  box-sizing: border-box;
  margin: 0;
  width: 100%;
}
.table-basic th,
.table-basic td {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
  -ms-text-overflow: ellipsis;
  white-space: nowrap;
}
.table-basic th div,
.table-basic td div {
  white-space: normal;
}
.table-basic a {
  color: #141F48;
  text-decoration: underline;
}
.table-basic tbody {
  background-color: #f8f8f8;
  color: #404040;
}
.table-basic tbody tr:hover > td,
.table-basic tbody tr:hover > th {
  background-color: #ebebeb;
}
.table-basic tbody tr.odd {
  background-color: #fff;
}
.table-basic tbody tr.odd:hover > td {
  background-color: #f2f2f2;
}
.table-basic thead:first-of-type tr:first-child > th:first-child {
  border-top-left-radius: 0;
}
.table-basic thead:first-of-type tr:first-child > th:last-child {
  border-top-right-radius: 0;
}
.table-basic tbody:last-child tr:last-child > td:first-child {
  border-bottom-left-radius: 0;
}
.table-basic tbody:last-child tr:last-child > td:last-child {
  border-bottom-right-radius: 0;
}
.table-basic thead th {
  background-color: #e7f2d9;
  border-bottom: 0;
  border-left: 0;
  border-right: 0;
  color: #141F48;
  font-size: 14px;
  padding: 12px 25px 11px 25px;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
.table-basic thead th:first-child {
  border-left: 0;
}
.table-basic thead th a {
  color: #141F48;
  text-decoration: none;
}
.table-basic tbody {
  background-color: #f8f8f8;
}
.table-basic tbody tr.has-subrow:hover {
  cursor: pointer;
}
.table-basic tbody tr.subrow td {
  margin: 0;
  padding: 0;
}
.table-basic tbody tr.subrow.subrow-open {
  background: #e7f2d9;
}
.table-basic tbody tr.active td:first-child {
  background-image: url("../Images/bg-table-active.gif");
  background-repeat: repeat-y;
}
.table-basic tbody td {
  border-bottom: 1px solid #ccc;
  border-left: 0;
  border-right: 0;
  line-height: 1.25em;
  padding: 21px 25px;
  white-space: nowrap;
}
.table-basic tbody td:first-child {
  border-left: 0;
}

/* Tables - CSS for LT IE9 */
.lt-ie9 .table-basic,
.lt-ie10 .table-basic {
  width: 100%;
}
.lt-ie9 .table-basic th, .lt-ie9 .table-basic td,
.lt-ie10 .table-basic th,
.lt-ie10 .table-basic td {
  max-width: 300px;
  overflow: ellipsis;
  -ms-text-overflow: ellipsis;
  white-space: normal;
  width: auto;
}

JavaScript

// No JavaScript Required