时间戳

首页 > 解决方案 > 使用 CSS 缩放 HTML 表格列

css - 使用 CSS 缩放 HTML 表格列

问题描述

我正在尝试在我的网页中创建一个动态表输出，但似乎无法弄清楚 css 以使列及其标题正确缩放以适应更大的字符 [此处为 css，以下小提琴中的所有代码]

编辑：理想情况下，我希望用户能够水平滚动以查看更多列，而不是让列使用文本换行

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>

我在这里包含了一个 jsfiddle

我已经修改了不同的 CSS 样式，但无济于事。

特别是在我的最小示例中，“long”列打印在列之外。

这是我关于 SO 的第一个问题，所以如果它可以更简洁，我很抱歉......任何帮助表示赞赏！

标签： css

解决方案

这是我的解决方案。我对 html 和 css 文件进行了一些更改。希望它对你有用。

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>

推荐阅读