html - 如何使用表格在行上添加边框?

标签 html css

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

这是我的代码

.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

最佳答案

我通常在表格上应用两个边框,然后在单元格上应用两个相反的边框:

.table_view_el {
  border-right: 1px solid;
  border-bottom: 1px solid;
}

.table_view_el th, 
.table_view_el td {
  border-top: 1px solid;
  border-left: 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="
    ">
        <th>Party</th>
        <th>Lead Seats</th>
        <th>Win Seats</th>
        <th>Total Seats</th>
      </tr>
      <tr style="
    ">
        <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>

如果您只想要行,请将左边框从单元格移动到表格

关于html - 如何使用表格在行上添加边框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50275821/

相关文章:

html - 任何好的软件 html 验证器

css - 使用 Css 创建 Minion Logo

javascript - 需要两次点击的 Accordion

html - 我在哪里可以找到一些 android 网页模板、css 或 html 用作起始页

javascript - 如何向下/向上滑动到滚动条的不同部分

html - 下拉菜单,z-index问题

css - 将输入字段对齐在 rails 中的同一行

javascript - 在每行的第一个元素上设置边框

javascript - 在不同的 iframe 中共享/更改全局变量

javascript - HTML 嵌入式 PDF 所有链接覆盖以在新选项卡中打开(目标 ="_blank")