Question

我想显示一个与中心对齐的表格，但我不知道为什么不能这样做...

脚本如下：

d3.text("../static/CSV/Chart_data/Tables/top2.csv", function(data) {
    var parsedCSV = d3.csv.parseRows(data);

    var container = d3.select("#table1")
        .append("table")

        .selectAll("tr")
            .data(parsedCSV).enter()
            .append("tr")

        .selectAll("td")
            .data(function(d) { return d; }).enter()
            .append("td")
            .text(function(d) { return d; });
});

该表显示在html网站的中间，代码为：

<div id="Access" hidden>                
    <div id="table1"></div>
    <script type="text/javascript" src="../static/scripts/table3.js" charset="utf-8"></script>
</div>

以及具有以下样式的css文件：

table {
    border-collapse: collapse;
    width: 70%;
    overflow-y: scroll;
}

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

tr:hover {background-color:#f5f5f5;}

有什么想法吗？谢谢！

Answer 1

对于table（它是一个类似于元素的块）居中的位置，您可以使用自动边距，例如像这样

堆栈片段

table {
    border-collapse: collapse;
    width: 70%;
    overflow-y: scroll;
    margin: 0 auto;             /*  added  */
    border: 1px dotted black    /*  for this demo  */
}

th, td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

tr:hover {background-color:#f5f5f5;}

<table>
  <tr><td>Cell with data</td></tr>
</table>

根据评论，我又添加了2个示例来增加行/列之间的距离。

示例1-单元格边框间距

table {
    border-collapse: seperate;    /*  changed from "collapse"  */
    width: 70%;
    overflow-y: scroll;
    margin: 0 auto;               /*  added  */
    border: 1px dotted black;     /*  for this demo  */
    
    border-spacing: 40px 20px;    /*  added  (need "border-collapse" to be "seperate")  */
}

th, td {
    padding: 8px;
    text-align: left;
    border: 1px solid #ddd;
}

tr:hover {background-color:#f5f5f5;}

<table>
  <tr><td>Cell with data</td><td>Cell with data</td><td>Cell with data</td></tr>
  <tr><td>Cell with data</td><td>Cell with data</td><td>Cell with data</td></tr>
  <tr><td>Cell with data</td><td>Cell with data</td><td>Cell with data</td></tr>
</table>

示例2-单元格填充

table {
    border-collapse: seperate;
    width: 70%;
    overflow-y: scroll;
    margin: 0 auto;               /*  added  */
    border: 1px dotted black;     /*  for this demo  */
}

th, td {
    padding: 28px;                /*  increased value  */
    text-align: left;
    border: 1px solid #ddd;
}

tr:hover {background-color:#f5f5f5;}

<table>
  <tr><td>Cell with data</td><td>Cell with data</td><td>Cell with data</td></tr>
  <tr><td>Cell with data</td><td>Cell with data</td><td>Cell with data</td></tr>
  <tr><td>Cell with data</td><td>Cell with data</td><td>Cell with data</td></tr>
</table>

表格布局，调整边距

1 个答案: