gpt4 book ai didi

javascript - 为什么我的两个 div 总是紧挨着?

转载 作者:行者123 更新时间:2023-11-28 03:19:03 26 4
gpt4 key购买 nike

我正在尝试使用 d3json 创建一些表,我还想在表之间插入一些内容。然而,这些表格总是粘在一起,我打算在它们之间插入的内容,会出现在意想不到的地方。

enter image description here

网站原来是这个样子的。理想情况下,“空格”一词应出现在两个表格之间。我在 w3school 中尝试了同样的事情,用一些静态数据替换了两个表,这很好。我想问题出在脚本上?但是,鉴于它们位于不同的 div 中,这对外观有何影响?非常感谢。

d3.json('data.json', function (error,data) {

function tabulate(data, columns) {
var table = d3.select(sector).append('table')
var thead = table.append('thead')
var tbody = table.append('tbody');

// append the header row
thead.append('tr')
.selectAll('th')
.data(columns).enter()
.append('th')
.text(function (column) { return column; });

// create a row for each object in the data
var rows = tbody.selectAll('tr')
.data(data)
.enter()
.append('tr');

// create a cell in each row for each column
var cells = rows.selectAll('td')
.data(function (row) {
return columns.map(function (column) {
return {column: column, value: row[column]};
});
})
.enter()
.append('td')
.text(function (d) { return d.value; });

return table;
}

// render the table(s)
tabulate(data, ['date', 'close']); // 2 column table

});
.bar_graph{
font: 10px sans-serif;
}

.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
font: 10px sans-serif;
}

.bar {
fill: steelblue;

}

.x.axis path {
display: none;
}

#table1 table,#table2 table{
font-family: arial,16px sans-serif;
border-collapse: collapse;
width: 70%;
}
td, th {

border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
<!DOCTYPE html>
<meta charset='utf-8'>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<link rel='stylesheet' href='style.css'>
</head>
<body>
<!--First Table-->
<div id="table1">
<script>
var sector = "#table1"
</script>
<script type='text/javascript' src='script.js'></script>
</div>
<!--Space header-->
<h1> space </h1>
<!--Second Table-->
<div id="table2">
<script>
var sector = "#table2"
</script>
<script type='text/javascript' src='script.js'></script>
</div>
</body>
</html>

最佳答案

使用 style="margin-top:10px;"为标签。您可以根据需要更改上边距。这应该应用于第二个表。

关于javascript - 为什么我的两个 div 总是紧挨着?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45294251/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com