如何使用CSS正确格式化表格

Question

我希望我的表格的外框是虚线，内框是实线。所以我为我的 normal-table 编写了以下CSS代码，但整个表格边框都是实心的。

.zulu-post .zulu-content .normal-table{
    color: #444444;
    border: 1px dashed #444444;
}

.zulu-post .zulu-content .normal-table td, .normal-table tr{
    padding: 10px;
    border: 1px solid #444444;
}

<table border="1" cellpadding="1" cellspacing="1" class="normal-table" style="width:500px;">
    <tbody>
        <tr>
            <td>Table Name</td>
        </tr>
        <tr>
            <td>Make sure that Stylesheet Classes is normal-table</td>
        </tr>
        <tr>
            <td>Text Here...</td>
        </tr>
    </tbody>
</table>

- user253938

---

请问是否可以提供相关的HTML代码？谢谢。 - kevin b.

@kevinb. 完成了。 - user253938

Answer 1

这是实现你想要的一种方法： 基本上，您需要为所有的标签添加border-left和border-top，然后从表格的两侧删除border，并在标签上使用dashed border。

.normal-table {
  color: #444444;
  border: 1px dashed #444444;
}

.normal-table td {
  padding: 10px;
  border-left: 1px solid #444444;
  border-top: 1px solid #444444;
}

.normal-table td:first-child {
  border-left: none;
}

.normal-table tr:first-child td {
  border-top: none;
}

<table cellpadding="1" cellspacing="0" class="normal-table" style="width:500px;">
    <tbody>
        <tr>
            <td>Table Name</td>
        </tr>
        <tr>
            <td>Make sure that Stylesheet Classes is normal-table</td>
        </tr>
        <tr>
            <td>Text Here...</td>
        </tr>
    </tbody>
</table>

- Chiller

Answer 2

首先使用border-collapse:collapse，这会将表格边框合并为单一边框，然后对table、tbody、tr等进行样式设置。

.normal-table {
  border: 2px solid red;
  border-collapse: collapse;
}

tr {
  border: 2px dashed red;
}

<table border="1" cellpadding="1" cellspacing="1" class="normal-table" style="width:500px;">
  <tbody>
    <tr>
      <td>Table Name</td>
    </tr>
    <tr>
      <td>Make sure that Stylesheet Classes is normal-table</td>
    </tr>
    <tr>
      <td>Text Here...</td>
    </tr>
  </tbody>
</table>

- frnt

Answer 3

你可以使用div作为替代方案：

.container {
  width: 100%;
  border: medium dashed darkgray;
  display: table;
}
.cell {
  width: 30%;
  border: thin solid red;
  height: 50px;
  display: table-cell;
}

<div class='container'>
<div class='cell'></div>
<div class='cell'></div>
<div class='cell'></div>
</div>

- Gerard