代码之家 › 专栏 › 技术社区 › Alberto32

HTML边框仅在表外

joomla3.0 css html

Alberto32 · 技术社区 · 9 年前

我如何才能将边框仅放在外部表格的周围?我不需要每个 <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>

3 回复 | 直到 9 年前

dorado 5 年前

您需要添加属性 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='"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>

Tiago Peres damanpreet singh 5 年前

带有外部边框的表格

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>
<第>名字</第>
<第>姓氏</第>
<第>年龄</第>
</tr>
<tr>
<td>吉尔</td>
<td>史密斯</td>
<td>50</td>
</tr>
<tr>
<td>伊芙</td>
<td>杰克逊</td>
<td>94</td>
</tr>
<tr>
<td>约翰</td>
<td>Doe</td>
<td>80</td>
</tr>
</表格>

可以继续为所有情况创建,但你明白了。

在CSS中,我们指定我们想要的边框。

我们可以将其应用于以下零个或多个元素,具体取决于我们希望最终结果是什么样子

<table> (表格)
<tr> (表格行)
<td> (表格数据)
<th> (表格标题)

Pistachio Guoguo 2 年前

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

table {
  border: 1px solid;
}

而不是

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

这样,您将只获得表格的外部边框,而不是每一行或单元格,来源: https://www.w3schools.com/css/css_table.asp