CODEWITHSUNDEEP
htmlcss
user5711656
user5711656

Reputation: 3678

how to add border on row using table?

can you please tell me how to add border on row using table ?

here is my code

.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

Upvotes: 0

Views: 42

Answers (4)

Darrion Ramdin
Darrion Ramdin

Reputation: 1

It seems to me that <tr>cannot be styled directly so what you can do is add a border bottom to the <td>.

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

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

Upvotes: 0

j08691
j08691

Reputation: 207901

You can add the following border-collapse rule on your table to get the row borders to show:

table {
  border-collapse: collapse;
}


.table_view_el {
  border: 1px solid
}

.table_view_el tr {
  border: 1px solid
}

table {
border-collapse: collapse;
}
<table cellpadding="0" cellspacing="0" class="table_view_el mrgB10">
  <tbody>
    <tr style="border-bottom: 1px solid red;">
      <th>Party</th>
      <th>Lead Seats</th>
      <th>Win Seats</th>
      <th>Total Seats</th>
    </tr>
    <tr style="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>

Upvotes: 0

USS
USS

Reputation: 470

i think so we can apply border on td so You can use this code for solution.

td {
    border-top: 1px solid #000000;
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
}

Upvotes: 0

Pete
Pete

Reputation: 58432

I usually apply two borders to the table and then the 2 opposite borders to the cells:

.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>

If you just want rows only, move left border from the cells to the table

Upvotes: 1

Related Questions