CODEWITHSUNDEEP
css
MayaGans
MayaGans

Reputation: 1845

Scale HTML table columns using CSS

I'm trying to create a dynamic table output in my webpage but can't seem to figure out the css to have the columns and their headers properly scale to fit larger characters [css here, all code in fiddle below]

EDIT: Ideally rather than having the columns use text wrapping I'd like the user to be able to scroll horizontally to see more columns

html, body {
 height: 100%;
 margin: 0;
}

body {
    background-color: #fff;
    font-family: sans-serif;
    overflow: hidden;
}

.container {
    position: fixed
    height: 100%
    width: 100%
}

#blocklyArea {
  display: inline-block;
  width:50%;
  height:100%;
  display: inline-block;
  float: left;
}

.three{
  width:50%;
  height:100%;
  position: absolute;
  display: inline-block;
  float: left;
}

.four{
  width:100%;
  height:50%;
}

.five{
  width:100%;
  height:50%;
  overflow-y: scroll;
  overflow-x: scroll;
}

.myTable tbody {
  display: block;
}

.myTable thead tr {
  height: 20px;
  top: 0;
}

table {
  border-collapse: collapse;
}

.table tr {
  background-color: white;
  border: 1px solid black;
  padding: .35em;
  width: 100%;
}

table th {
  background-color: #F7F9FA;
  color: black;
  padding: .425em;
  text-align: center;
}

table td {
  padding: .425em;
  text-align: left;
  word-wrap: break-word;
  font-size: 0.75em;
  border: 1px solid #D7DADC;
}

table th {
  font-size: .75em;
  letter-spacing: .1em;
  text-align: left;
  border: 1px solid #D7DADC;
}

tr {
  display: table;
  table-layout: fixed;
  border: 1px solid #D7DADC;
  white-space:nowrap;
  width: 100%;
}


html, body {
 height: 100%;
 margin: 0;
}

body {
	background-color: #fff;
	font-family: sans-serif;
	overflow: hidden;
}

.container {
	position: fixed
	height: 100%
	width: 100%
}

#blocklyArea {
  display: inline-block;
  width:50%;
  height:100%;
  display: inline-block;
  float: left;
}

.three{
  width:50%;
  height:100%;
  position: absolute;
  display: inline-block;
  float: left;
}

.four{
  width:100%;
  height:50%;
}

.five{
  width:100%;
  height:50%;
  overflow-y: scroll;
  overflow-x: scroll;
}

.myTable tbody {
  display: block;
}

.myTable thead tr {
  height: 20px;
  top: 0;
}

table {
  border-collapse: collapse;
}

.table tr {
  background-color: white;
  border: 1px solid black;
  padding: .35em;
  width: 100%;
}

table th {
  background-color: #F7F9FA;
  color: black;
  padding: .425em;
  text-align: center;
}

table td {
  padding: .425em;
  text-align: left;
  word-wrap: break-word;
  font-size: 0.75em;
  border: 1px solid #D7DADC;
}

table th {
  font-size: .75em;
  letter-spacing: .1em;
  text-align: left;
  border: 1px solid #D7DADC;
}

tr {
  display: table;
  table-layout: fixed;
  border: 1px solid #D7DADC;
  white-space:nowrap;
  width: 100%;
}
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  
  <style>
  
html, body {
 height: 100%;
 margin: 0;
}

body {
	background-color: #fff;
	font-family: sans-serif;
	overflow: hidden;
}

.container {
	position: fixed
	height: 100%
	width: 100%
}

#blocklyArea {
  display: inline-block;
  width:50%;
  height:100%;
  display: inline-block;
  float: left;
}

.three{
  width:50%;
  height:100%;
  position: absolute;
  display: inline-block;
  float: left;
}

.four{
  width:100%;
  height:50%;
}

.five{
  width:100%;
  height:50%;
  overflow-y: scroll;
  overflow-x: scroll;
}

.myTable tbody {
  display: block;
}

.myTable thead tr {
  height: 20px;
  top: 0;
}

table {
  border-collapse: collapse;
}

.table tr {
  background-color: white;
  border: 1px solid black;
  padding: .35em;
  width: 100%;
}

table th {
  background-color: #F7F9FA;
  color: black;
  padding: .425em;
  text-align: center;
}

table td {
  padding: .425em;
  text-align: left;
  word-wrap: break-word;
  font-size: 0.75em;
  border: 1px solid #D7DADC;
}

table th {
  font-size: .75em;
  letter-spacing: .1em;
  text-align: left;
  border: 1px solid #D7DADC;
}

tr {
  display: table;
  table-layout: fixed;
  border: 1px solid #D7DADC;
  white-space:nowrap;
  width: 100%;
}
</style>
  
</head>

<body>

<div class="container">
<div id="blocklyArea">
</div>

<div class="three">
<div class="four"><button onclick="showCode()">Run</button><div id="plotOutput"></div></div>
<div class="five" id="dataTableOutput"></div>
</div>
</div>

<div id="blocklyDiv" style="position: absolute"></div>
  
<script>
    
    
function json2table(json, classes) {
 // one table column per property 
 // we know each object has the same properties
 
 // get key names and set as column headers
  var cols = Object.keys(json[0]);
 
  var headerRow = '';
  var bodyRows = '';
  
  // create column headers from col
  // a string of th elements
  cols.map(function(col) {
  	headerRow += '<th>' + col + '</th>';
  });
  
  // build the rows
  json.map(function(row) {
  
  	bodyRows += '<tr>';
  	
  	 // loop over object properties and create cells 
 	 cols.map(function(colName) {
  		bodyRows +=  `<td> ${row[colName]} </td>`
  	});
  
  	bodyRows += '</tr>';
	});
  
  
  
return `<table class=\"myTable\"></thead><tr> ${headerRow} </tr></thead><tbody> ${bodyRows} </tbody></table>`
  
}

var iris = [
  {"Sepal_Length":5.1, "long": "thisisareallyreallylongtest", "Sepal_Width":3.5,"Petal_Length":1.4,"Petal_Width":0.2, "Species":"setosa", "more": "make sure df scrolls"},
  {"Sepal_Length":4.9,"long": "thisisatest", "Sepal_Width":3,"Petal_Length":1.4,"Petal_Width":0.2,"Species":"setosa", "more": "make sure df scrolls"},
  {"Sepal_Length":4.7, "long": "thisisatest", "Sepal_Width":3.2,"Petal_Length":1.3,"Petal_Width":0.2,"Species":"setosa", "more": "make sure df scrolls"},
  {"Sepal_Length":4.6, "long": "thisisatest","Sepal_Width":3.1,"Petal_Length":1.5,"Petal_Width":0.2,"Species":"setosa", "more": "make sure df scrolls"},
  {"Sepal_Length":5, "long": "thisisatest", "Sepal_Width":3.6,"Petal_Length":1.4,"Petal_Width":0.2,"Species":"setosa", "more": "make sure df scrolls"},
  {"Sepal_Length":5.4,"long": "thisisatest", "Sepal_Width":3.9,"Petal_Length":1.7,"Petal_Width":0.4,"Species":"setosa", "more": "make sure df scrolls"},
  {"Sepal_Length":4.6,"long": "thisisatest", "Sepal_Width":3.4,"Petal_Length":1.4,"Petal_Width":0.3,"Species":"setosa", "more": "make sure df scrolls"},
  {"Sepal_Length":5,"long": "thisisatest", "Sepal_Width":3.4,"Petal_Length":1.5,"Petal_Width":0.2,"Species":"setosa", "more": "make sure df scrolls"}]

    function showCode() {
        document.getElementById('dataTableOutput').innerHTML = json2table(iris);
    }

  </script>

</body>

</html>

I've included a jsfiddle here

I've tinkered with different CSS styling but to no avail.

Specifically in my minimal example the column "long" is printing outside of the column.

This is my first question on SO so I'm sorry if it could have been more concise...Any help appreciated!

Upvotes: 0

Views: 173

Answers (1)

Showrin Barua
Showrin Barua

Reputation: 1795

Here's my solution. I've made some changes in html and css file. Hope it will work for you.

html, body {
 height: 100%;
 margin: 0;
}

body {
	background-color: #fff;
	font-family: sans-serif;
	overflow: hidden;
}

.container {
	position: fixed
	height: 100%
	width: 100%
}

#blocklyArea {
  display: inline-block;
  width:50%;
  height:100%;
  display: inline-block;
  float: left;
}

.three{
  width:50%;
  height:100%;
  position: absolute;
  display: inline-block;
  float: left;
}

.four{
  width:100%;
  height:50%;
}

.five{
  width:100%;
  height:50%;
  overflow-y: scroll;
  overflow-x: scroll;
}

.myTable tbody {
  display: block;
}

.myTable thead tr {
  height: 20px;
  top: 0;
}

table {
  border-collapse: collapse;
}

.table tr {
  background-color: white;
  border: 1px solid black;
  padding: .35em;
  width: 100%;
}

table th {
  background-color: #F7F9FA;
  color: black;
  padding: .425em;
  text-align: center;
  word-wrap: break-word;
}

table td {
  padding: .425em;
  text-align: left;
  word-wrap: break-word;
  font-size: 0.75em;
  border: 1px solid #D7DADC;
}

table th {
  font-size: .75em;
  letter-spacing: .1em;
  text-align: left;
  border: 1px solid #D7DADC;
}

tr {
  display: table;
  table-layout: fixed;
  border: 1px solid #D7DADC;
  white-space: wrap;
  word-wrap: break-word;
  padding: .425em;
  width: 100%;
}
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  
</head>

<body>

<div class="container">
<div id="blocklyArea">
</div>

<div class="three">
<div class="four"><button onclick="showCode()">Run</button><div id="plotOutput"></div></div>
<div class="five" id="dataTableOutput"></div>
</div>
</div>

<div id="blocklyDiv" style="position: absolute"></div>
  
<script>
function json2table(json, classes) {
  var cols = Object.keys(json[0]);
  var headerRow = '';
  var bodyRows = '';

  cols.map(function(col) { headerRow += '<th>' + col + '</th>'; });
  
  json.map(function(row) {
  	bodyRows += '<tr>';
 	 cols.map(function(colName) { bodyRows +=  `<td> ${row[colName]} </td>` });
  
  	bodyRows += '</tr>';
  });
  
  return `<table class=\"myTable\"></thead><tr> ${headerRow} </tr></thead><tbody> ${bodyRows} </tbody></table>`
}

var iris = [
  {"Sepal_Length":5.1, "long": "thisisareallyreallylongtest", "Sepal_Width":3.5,"Petal_Length":1.4,"Petal_Width":0.2, "Species":"setosa", "more": "make sure df scrolls"},
  {"Sepal_Length":4.9,"long": "thisisatest", "Sepal_Width":3,"Petal_Length":1.4,"Petal_Width":0.2,"Species":"setosa", "more": "make sure df scrolls"},
  {"Sepal_Length":4.7, "long": "thisisatest", "Sepal_Width":3.2,"Petal_Length":1.3,"Petal_Width":0.2,"Species":"setosa", "more": "make sure df scrolls"},
  {"Sepal_Length":4.6, "long": "thisisatest","Sepal_Width":3.1,"Petal_Length":1.5,"Petal_Width":0.2,"Species":"setosa", "more": "make sure df scrolls"},
  {"Sepal_Length":5, "long": "thisisatest", "Sepal_Width":3.6,"Petal_Length":1.4,"Petal_Width":0.2,"Species":"setosa", "more": "make sure df scrolls"},
  {"Sepal_Length":5.4,"long": "thisisatest", "Sepal_Width":3.9,"Petal_Length":1.7,"Petal_Width":0.4,"Species":"setosa", "more": "make sure df scrolls"},
  {"Sepal_Length":4.6,"long": "thisisatest", "Sepal_Width":3.4,"Petal_Length":1.4,"Petal_Width":0.3,"Species":"setosa", "more": "make sure df scrolls"},
  {"Sepal_Length":5,"long": "thisisatest", "Sepal_Width":3.4,"Petal_Length":1.5,"Petal_Width":0.2,"Species":"setosa", "more": "make sure df scrolls"}]

    function showCode() {
        document.getElementById('dataTableOutput').innerHTML = json2table(iris);
    }

  </script>
</body>
</html>

Upvotes: 2

Related Questions