如何在 HTML/CSS 中创建此边框样式？

Question

我正在拼命寻找正确的代码来为我的网站在 HTML/CSS 中创建 table 边框，看起来像这张图片：

我找不到执行此操作的方法...

这里是另一张照片：

看起来这个单元格有一些“3d 效果”或类似的东西....

Answer 1

以下是一个示例（请注意，示例不是完整的答案，所以我的答案是），看到这个，学习 CSS 基础知识

下面的代码会给你想要的结果。

 //HTML
    <table style="border:none;">
  <tr>
    <td>Corporate Finance</td>
  </tr>
  <tr>
    <td>Derivatives</td>
  </tr>
  <tr>
    <td>Economics</td>
  </tr>
</table>

// CSS
    table {
      border-spacing: 5px;
}

table, th, td {
    margin-top:2px;
    border-left: 1px solid #E8E8E8;
    border-bottom:2px solid #E8E8E8;
    border-right:1px solid #E8E8E8;
    margin-top:2px;
}

Answer 2

你可以用不同的方式使用它。但你必须学习基础 CSS.

.borderall td{border:1px solid #ccc;}

.borderbottom td{border-bottom:1px solid #ccc;}

table 1
<table width="100%" class="borderall">
<tr>
  <td>block one</td>
    <td>block one</td>
    <td>block one</td>
  </tr>
</table>
<br/>
table 2
<table width="100%" class="borderall">
<tr>
  <td>block one</td>
</tr>
  <tr>
  <td>block one</td>
</tr>
  <tr>
  <td>block one</td>
</tr>
</table>
<br/>
table3
<table width="100%" cellpadding="0" cellspacing="0" class="borderbottom">
<tr>
  <td>block one</td>
</tr>
  <tr>
  <td>block one</td>
</tr>
  <tr>
  <td>block one</td>
</tr>
</table>

如何在 HTML/CSS 中创建此边框样式？

How to create this border styles in HTML/CSS?

html

css

border

css-tables