javascript - 为什么我的两个 div 总是紧挨着？-6ren

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

转载作者：行者123 更新时间：2023-11-28 03:19:03

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

网站原来是这个样子的。理想情况下，“空格”一词应出现在两个表格之间。我在 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>