Question

当你看到有文件列和带有排序功能的日期时，我想像窗口浏览器一样制作模态窗口，我得到了它的工作。我从表中删除了所有边框，现在我想在列g.drawString(listOfFiles[0].getName(), 660, 395);单元格之间添加空格。我怎么能用CSS做到这一点？

的main.css

td

main.html中

table {
    border:none !important;
    border-spacing: 10px !important;
}

Answer 1

我想你想添加这样的东西

td {
    padding: 50px;
}

如果您不需要在顶部和底部填充，只需使用padding-right。

td {
    padding-right: 50px;
}

Answer 2

我只想在列之间添加空格

border-spacing有两个值，水平＆amp;垂直。

E.g。

/* border-spacing: horizontal vertical */
border-spacing: 1% 2em;

MDN Reference

table {
    border:none !important;
    border-spacing: 10px 0 !important;
    /* override bootstrap default */
    border-collapse:separate !important;
}
  
  td {
  background: pink;
  padding: 1em;
  /* for demo only - not a border */
  outline:1px solid grey;
}

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Answer 3

试试这个

<table>
    <tr> 
        <td>One</td> 
        <td>Two</td> 
        <td>Three</td> 
        <td>Four</td> 
    </tr>
</table>

td:nth-of-type(2) {
padding-right: 20px;
}

如何在表格单元格之间添加空间`td`？

3 个答案: