Question

我是开发人员，这是我关于平面设计的第一个问题。

对于一个网站，我想以postgresql（或mysql或其他）的方式设计一个表：

    name    | height | first_man 
------------+--------+-----------
 everest    |   8848 | hillary
 mont blanc |   4810 | balmat

我为此开了一个代码。

我们需要做三件事：

1 - 添加烟斗（＆＃39; |＆＃39;）：我发现了:: after for this

2 - 添加破折号（＆＃39; - ＆＃39;）：我不想使用边框破碎，因为我希望能够使用其他字符（例如＆＃39; =＆## 39;总计）

3 - 在交叉点添加加号（＆＃39; +＆＃39;）

Answer 1

Etvoilà！

请在此处查看解决方案：http://codepen.io/bixente57/pen/JKQjpg

代码：

<table class="brutal">
  <thead class="brutal data">
    <td>name</td>
    <td>height</td>
    <td class="last">first_man</rd>
  </thead>
  <tr class="line">
    <td>-----------</td>
    <td>-----------</td>
    <td class="last">--------------</td>
  </tr>
  <tr class="data">
    <td>mont blanc</td>
    <td>4810</td>
    <td class="last">Balmat</rd>
  </tr>
  <tr class="data">
    <td>everest</td>
    <td>8848</td>
    <td class="last">hillary</rd>
  </tr>
</table>

CSS

table.brutal{
  font-family:courier;
}
table.brutal thead {
  text-align:center;
}
table.brutal td{
  margin:0;
  padding:0;
}

table.brutal .data td:not(.last)::after {
  content:'|';
  float:right;
}
table.brutal .line td:not(.last)::after {
  content:'+';
  float:right;
  padding-top:1px;
}

你能评论一下CSS / HTML代码吗？（我不知道最佳实践，也许有一些耐火材料/风格需要改进？）

如何为网站设计一个“Postgreql-like”表？

1 个答案: