HTML边框仅在表外

Question

如何只在外部表格周围放置边框？我并不是每个<tr>都需要，而是在我身边。我尝试使用css，但在Joomla文章中，这并不容易。谢谢你的帮助。

<table style="background-color: #ffffff; filter: alpha(opacity=40); opacity: 0.95;">
<tbody>
<tr>
<td>aasda</td>
<td>asfasf<a title="Ep. 1 Sono Reika" > </a></td>
<td width="60%">asfasfasfasf</td>
<td>blabla</td>
</tr>
<tr>
<td> saf</td>
<td><a title="Ep. 2 La grazia"> </a>asf</td>
<td width="&quot;70%"> asf</td>
<td rowspan="9" width="30%">
<p>blabla</p>
<p>blalbalbalalb</p>
</td>
</tr>
<tr>
<td> asf</td>
<td><a title="Ep. 2 La grazia" > </a>asf</td>
<td> asf</td>
</tr>
<tr>
<td> asf</td>
<td><a title="Ep. 2 La grazia" > </a>asf</td>
<td width="&quot;70%"> asf</td>
</tr>
</tbody>
</table>
<p> </p>

Answer 1

您需要将属性border:1px solid red添加到表格

<table style="background-color: #ffffff; filter: alpha(opacity=40); opacity: 0.95;border:1px red solid;">
<tbody>
<tr>
<td>aasda</td>
<td>asfasf<a title="Ep. 1 Sono Reika" > </a></td>
<td width="60%">asfasfasfasf</td>
<td>blabla</td>
</tr>
<tr>
<td> saf</td>
<td><a title="Ep. 2 La grazia"> </a>asf</td>
<td width="&quot;70%"> asf</td>
<td rowspan="9" width="30%">
<p>blabla</p>
<p>blalbalbalalb</p>
</td>
</tr>
<tr>
<td> asf</td>
<td><a title="Ep. 2 La grazia" > </a>asf</td>
<td> asf</td>
</tr>
<tr>
<td> asf</td>
<td><a title="Ep. 2 La grazia" > </a>asf</td>
<td width="&quot;70%"> asf</td>
</tr>
</tbody>
</table>
<p> </p>

Answer 2

带边框的桌子

table {
  border: 1px solid black;
  border-collapse: collapse;
}

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

---

表格在行外和行边框

table, tr {
  border: 1px solid black;
  border-collapse: collapse;
}

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

---

可以继续为所有情况创建，但是您明白了。

在CSS中，我们指定要具有边框的内容。

我们可以将其应用于零个或多个以下元素，具体取决于我们希望最终结果看起来像什么

• <table>（表格）
• <tr>（表格行）
• <td>（表格数据）
• <th>（表格标题）