如何让 Tabulator 表彼此相邻显示？

Question

目前它们显示在另一个下方。

我尝试了以下，看起来很丑陋：

<div style="float: left;" id="property-table"></div>
<div style="float: right;" id="expenses-table"></div>

有更好的选择吗？

Answer 1

勾选这个w3schools example

const tabledata1 = [{
    id: 1,
    name: "Oli ",
    money: "0",
    col: "red",
    dob: ""
  },
  {
    id: 2,
    name: "Mary ",
    money: "0",
    col: "blue",
    dob: "14/05/1982"
  },
  {
    id: 3,
    name: "Christine ",
    money: "0",
    col: "green",
    dob: "22/05/1982"
  },
  {
    id: 4,
    name: "Brendon ",
    money: "0",
    col: "orange",
    dob: "01/08/1980"
  },
  {
    id: 5,
    name: "Margret ",
    money: "0",
    col: "yellow",
    dob: "31/01/1999"
  },
];

const tabledata2 = [{
    id: 1,
    name: " Bob",
    money: "12",
    col: "red",
    dob: ""
  },
  {
    id: 2,
    name: " May",
    money: "1",
    col: "blue",
    dob: "14/05/1982"
  },
  {
    id: 3,
    name: " Lobowski",
    money: "42",
    col: "green",
    dob: "22/05/1982"
  },
  {
    id: 4,
    name: "Brendon ",
    money: "0",
    col: "orange",
    dob: "01/08/1980"
  },
  {
    id: 5,
    name: " Marmajuke",
    money: "16",
    col: "yellow",
    dob: "31/01/1999"
  },
];

const table = new Tabulator("#example-table1", {
  height: 205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
  data: tabledata1, //assign data to table
  layout: "fitColumns", //fit columns to width of table (optional)
  columns: [ //Define Table Columns
    {
      title: "Name",
      field: "name",
      width: 150
    },
    {
      title: "money",
      field: "money",
      align: "left",
      formatter: "money"
    },
    {
      title: "Favourite Color",
      field: "col"
    },
    {
      title: "Date Of Birth",
      field: "dob",
      sorter: "date",
      align: "center"
    },
  ]
});
const table2 = new Tabulator("#example-table2", {
  height: 205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
  data: tabledata1, //assign data to table
  layout: "fitColumns", //fit columns to width of table (optional)
  columns: [ //Define Table Columns
    {
      title: "Name",
      field: "name",
      width: 150
    },
    {
      title: "money",
      field: "money",
      align: "left",
      formatter: "money"
    },
    {
      title: "Favourite Color",
      field: "col"
    },
    {
      title: "Date Of Birth",
      field: "dob",
      sorter: "date",
      align: "center"
    },
  ]
});

* {
  box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */

.column {
  float: left;
  width: 50%;
  padding: 10px;
  height: 300px;
  /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}

<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://unpkg.com/tabulator-tables@4.2.7/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.2.7/dist/js/tabulator.min.js"></script>
</head>

<body>
  <div class="row">
    <div class="column" style="background-color:#aaa;">
      <h2>Column 1</h2>
      <div id="example-table1"></div>
    </div>
    <div class="column" style="background-color:#bbb;">
      <h2>Column 2</h2>
      <div id="example-table2"></div>
    </div>
  </div>



</body>

</html>

如何让 Tabulator 表彼此相邻显示？

How to get Tabulator tables to show next to each other?

html

tabulator