HTML 边框仅在 table 之外

Question

如何只在外部 table 周围放置边框？我不需要在每个 <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='"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='"70%'>asf</td>
        </tr>
      </tbody>
    </table>

Answer 1

您需要将属性 border:1px solid red 添加到您的 table

<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='"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='"70%'>asf</td>
    </tr>
  </tbody>
</table>
<p></p>

Answer 2

Table 边框在外面

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 外边框在行内

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> (table)
<tr>（table 行）
<td>（table 数据）
<th>（table 标题）

Answer 3

不确定我是否理解正确，但我的问题的解决方案是

table {
  border: 1px solid;
}

而不是任何

table th, table td {
  border: 1px solid;
}

这样你只会得到 table 的外边框，而不是每一行或单元格，来源：https://www.w3schools.com/css/css_table.asp

HTML 边框仅在 table 之外

HTML border only outside the table

html

css

joomla3.0

Table 边框在外面

Table 外边框在行内