时间戳

首页 > 解决方案 > 将表格与绘图相邻

html - 将表格与绘图相邻

问题描述

我对在 html 中移动/放置项目感到震惊。我们可以尝试移动表格，如底部所示（预期输出）。是否可以有如下布局。将底部移动到图旁边

<html>
<style>
  table {
    {
      font-family: arial, sans-serif;
      border-collapse: collapse;
      width: 100%;
    }
  }
  
  td,
  th {
    {
      border: 1px solid #dddddd;
      text-align: left;
      padding: 8px;
    }
  }
  
  tr:nth-child(even) {
    {
      background-color: #dddddd;
    }
  }
</style>

<body>

  <table>
    <tr>
      <th>Region</th>
      <th>Experience</th>
      <th>Paper</th>
    </tr>
    <tr>
      <td>REGION</td>
      <td>MInition</td>
      <td>Papt</td>
    </tr>
  </table>

</body>
<br></br>

</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

<body>
  <canvas id="myChart" style="width:90%;max-width:600px"></canvas>

  <div style="width:100%">
    <div class="box">
      <script>
        var xValues = [1, 2];

        new Chart("myChart", {
          type: "line",
          data: {
            labels: xValues,
            datasets: [{
              data: [1, 2],
              borderColor: "red",
              fill: false
            }, {
              data: [3, 4],
              borderColor: "green",
              fill: false
            }, {
              data: [4, 5],
              borderColor: "blue",
              fill: false
            }, {
              data: [6, 7],
              borderColor: "black",
              fill: false
            }, {
              data: [8, 9],
              borderColor: "#8E44AD",
              fill: false
            }]
          },
          options: {
            legend: {
              display: false
            }
          }
        });
      </script>
    </div>

    <div class="box">
      <table>
        <tr>
          <th>Company</th>
          <th>Contact</th>
          <th>Country</th>
        </tr>
        <tr>
          <td>Alfreds Futterkiste</td>
          <td>Maria Anders</td>
          <td>Germany</td>
        </tr>
      </table>
    </div>
  </div>


  <style>
    .b {
      display: inline-block;
      width: 100px;
      height: 100px;
      padding: 5px;
      border: 1px solid blue;
      background-color: yellow;
    }
    
    .c {
      display: block;
      width: 100px;
      height: 100px;
      padding: 5px;
      border: 1px solid blue;
      background-color: yellow;
    }
  </style>

上面的代码给了我一个布局，如下所示 在此处输入图像描述

是否可以有如下布局。将底部移动到图旁边 在此处输入图像描述

标签： htmlcss

解决方案

给你，但一定要调整代码并添加媒体查询，以保持设计在较小的屏幕上响应

<html>
<head>
<style>
table {{
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}}

td, th {{
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}}

tr:nth-child(even) {{
  background-color: #dddddd;
}}
</style>
</head>
<body>

<table>
  <tr>
    <th>Region</th>
    <th>Experience</th>
    <th>Paper</th>
  </tr>
  <tr>
    <td>REGION</td>
    <td>MInition</td>
    <td>Papt</td>
  </tr>
</table>

</body>
<br></br>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<body>
<canvas id="myChart" style="display:inline-block;max-width:600px"></canvas>

<div style="display:inline-block;">
<div class="box"><script>
var xValues = [1,2];

new Chart("myChart", {
  type: "line",
  data: {
    labels: xValues,
    datasets: [{
      data: [1,2],
      borderColor: "red",
      fill: false
    }, {
      data: [3,4],
      borderColor: "green",
      fill: false
    }, {
      data: [4,5],
      borderColor: "blue",
      fill: false
    }, {
      data: [6,7],
      borderColor: "black",
      fill: false
    }, {
      data: [8,9],
      borderColor: "#8E44AD",
      fill: false
    }]
  },
  options: {
    legend: {display: false}
  }
});
</script></div>

<div class="box" style="position:absolute;top:90">
<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
</table>
</div>
</div>


<style>
.b {
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;    
  background-color: yellow; 
}

.c {
  display: block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;    
  background-color: yellow; 
}
</style>

推荐阅读