Question

你能告诉我如何使用表格在行上添加边框吗？

这是我的代码

.table_view_el {
  border: 1px solid
}

.table_view_el tr {
  border: 1px solid
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <table cellpadding="0" cellspacing="0" class="table_view_el mrgB10">
    <tbody>
      <tr style="
        /* outline: 1px solid; */
        border-bottom: 1px solid red;
        /* border-bottom: 1pt solid black; */
    ">
        <th>Party</th>
        <th>Lead Seats</th>
        <th>Win Seats</th>
        <th>Total Seats</th>
      </tr>
      <tr style="
        /* border-bottom: 1px solid black; */
        padding: -1px;
    ">
        <td>INC</td>
        <td>0</td>
        <td>120</td>
        <td>120</td>
      </tr>
      <tr>
        <td>BJP</td>
        <td>0</td>
        <td>50</td>
        <td>50</td>
      </tr>
      <tr>
        <td>JD(S)</td>
        <td>0</td>
        <td>37</td>
        <td>37</td>
      </tr>
      <tr>
        <td>OTH</td>
        <td>0</td>
        <td>15</td>
        <td>15</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

https://jsbin.com/hosogiyaji/edit?html,css,output

Answer 1

在我看来，<tr>无法直接设置样式，因此您可以将border bottom添加到<td>。

tr td {
  border-bottom: 1px solid black;
}

tr:last-child td {
  border-bottom: 0;
}

如何使用表格在行上添加边框？

1 个答案: