Bootstrap table tr border top and bottom doesn't work - html

I try to have my table like here
I try to put border bottom and top for tr to make my code like in the image. One border works but the other doesn't.
Someone on internet said that it's good to put display block for tr, but if I do that all my text will go left side.
In my code I but red and blue border color to see better.
Can someone tell me how to achieve this?
table {
background-color: #EEEEEE;
margin-top: 40px;
}
table tr {
/*display: block;*/
border-top: 2px solid red;
border-bottom: 2px solid blue;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<table class="table table-striped">
<tbody>
<tr>
<td> </td>
<td class="table-title">Matin</td>
<td class="table-title">Apres-midi</td>
</tr>
<tr>
<td>Lundi</td>
<td>08h00-12h00</td>
<td>13h00-17h00</td>
</tr>
<tr>
<td>Mardi</td>
<td>08h00-12h00</td>
<td>13h00-17h00</td>
</tr>
<tr>
<td>Mercredi</td>
<td>08h00-12h00</td>
<td>13h00-17h00</td>
</tr>
<tr>
<td>Jeudi</td>
<td>08h00-12h00</td>
<td>13h00-17h00</td>
</tr>
<tr>
<td>Vendredi</td>
<td>08h00-12h00</td>
<td>13h00-17h00</td>
</tr>
<tr>
<td>Samedi</td>
<td>08h00-12h00</td>
<td>13h00-17h00</td>
</tr>
<tr>
<td>Dimache</td>
<td>Ferme</td>
<td>Ferme</td>
</tr>
</tbody>
</table>
</body>
</html>


There is default styling in Bootstrap that you need to override, either with increased specificity or !important.
The code is
.table>tbody>tr>td,
.table>tbody>tr>th,
.table>tfoot>tr>td,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>thead>tr>th {
padding: 8px;
line-height: 1.42857143;
vertical-align: top;
border-top: 1px solid #ddd;
}
Then you need to override the border-collapse property
table {
background-color: #EEEEEE;
margin-top: 40px;
border-collapse: separate !important;
}
.table>tbody>tr>td,
.table>tbody>tr>th,
.table>tfoot>tr>td,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>thead>tr>th {
padding: 8px;
line-height: 1.42857143 vertical-align: top;
border-top: 4px solid green !important;
border-bottom: 4px solid red !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-striped">
<tbody>
<tr>
<td> </td>
<td class="table-title">Matin</td>
<td class="table-title">Apres-midi</td>
</tr>
<tr>
<td>Lundi</td>
<td>08h00-12h00</td>
<td>13h00-17h00</td>
</tr>
<tr>
<td>Mardi</td>
<td>08h00-12h00</td>
<td>13h00-17h00</td>
</tr>
<tr>
<td>Mercredi</td>
<td>08h00-12h00</td>
<td>13h00-17h00</td>
</tr>
<tr>
<td>Jeudi</td>
<td>08h00-12h00</td>
<td>13h00-17h00</td>
</tr>
<tr>
<td>Vendredi</td>
<td>08h00-12h00</td>
<td>13h00-17h00</td>
</tr>
<tr>
<td>Samedi</td>
<td>08h00-12h00</td>
<td>13h00-17h00</td>
</tr>
<tr>
<td>Dimache</td>
<td>Ferme</td>
<td>Ferme</td>
</tr>
</tbody>
</table>


I have updated your code. The output will give you top border color as red and bottom border color as blue.
table {
background-color: #EEEEEE;
margin-top: 40px;
}
tr:nth-child(even){
/*display: block;*/
border-top: 2px solid red;
/*background-color: #CC9999;*/
}
tr:nth-child(odd){
/*display: block;*/
border-top: 2px solid blue;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<table class="table table-striped">
<tbody>
<tr>
<td> </td>
<td class="table-title">Matin</td>
<td class="table-title">Apres-midi</td>
</tr>
<tr>
<td>Lundi</td>
<td>08h00-12h00</td>
<td>13h00-17h00</td>
</tr>
<tr>
<td>Mardi</td>
<td>08h00-12h00</td>
<td>13h00-17h00</td>
</tr>
<tr>
<td>Mercredi</td>
<td>08h00-12h00</td>
<td>13h00-17h00</td>
</tr>
<tr>
<td>Jeudi</td>
<td>08h00-12h00</td>
<td>13h00-17h00</td>
</tr>
<tr>
<td>Vendredi</td>
<td>08h00-12h00</td>
<td>13h00-17h00</td>
</tr>
<tr>
<td>Samedi</td>
<td>08h00-12h00</td>
<td>13h00-17h00</td>
</tr>
<tr>
<td>Dimache</td>
<td>Ferme</td>
<td>Ferme</td>
</tr>
</tbody>
</table>
</body>
</html>

Related

How to position a table in right side of screen using HTML?

How to position a table on the right side of the screen? The desired output looks like this:
table on the right
How do we pull it off? Thanks!
The code I used is:
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<td colspan="2">Sum: $180</td>
</tr>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>

sometimes reading documentation may be useful
table,
th,
td {
border: 1px solid black;
}
table {
float: right;
}
<table>
<tr>
<td colspan="2">Sum: $180</td>
</tr>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>

You can make the table right side by using following code:
table{
width: auto;
float: right;
}
table {
width: auto;
float: right;
}
<html>
<body>
<table>
<tr>
<td>
Item 1
</td>
<td>
Item 2
</td>
</tr>
</table>
</body>
</html>

The needed code to pull it off is:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
table, th, td {
border: 1px solid black;
}
table {float: right;}
</style>
</head>
<body>
<table>
<tr>
<th colspan="2">Ouch</th>
</tr>
<tr>
<th colspan="2"><img src=AAAAAHjpg" alt="Posporo" width="300" height="300"></th>
</tr>
<tr>
<th colspan="2">Professional</th>
</tr>
<tr>
<th>Affiliation</th>
<td>Mafia</td>
</tr>
<tr>
<th>Profession</th>
<td>Eater</td>
</tr>
<tr>
<th>Partner</th>
<td>You</td>
</tr>
<tr>
<th>Base</th>
<td>Somewhere</td>
</tr>
<tr>
<th colspan="2">Personal</th>
</tr>
<tr>
<th>Education</th>
<td>Pamantasan ng Unibersidad ng Paaralan</td>
</tr>
<tr>
<th colspan="2">Signature</th>
</tr>
<tr>
<th colspan="2">gd jasdagjadgjd</th>
</tr>
</table>
</body>
</html>

CSS styling: tables with inside tables (borders and backgrounds)

Trying to build some webpages that contain various tables - e.g. main table that is holding a header - main page and a footer of a page - marked 2 on the picture.
In the main section of this table I have a lot of tables that shows various data for the user - marked 1 on the picture, so I have added specific style for this tables, it looks like this:
.datatable {
border-collapse: collapse; /* hiding double lines between cells */
border: 2px solid white; /* hiding border of a table */
}
.datatable th, td
{
padding: 5px 10px;
border: 1px solid black; /* adding a border for th and td */
}
.datatable th {
background-color: #EBECEC;
font-weight: bold;
vertical-align: bottom;
}
.datatable tr:nth-child(odd) {
background-color: #EBECEC;
}
And these tables, classed with .datatable works fine and seems it's ok. when showing it's in browser.
But table which contains this tables (2) with data inside (1) - also have some borders over it's cells. My css doesn't contain any directives referring properties of simple tables, and such tables were showed without any borders (border="0" property of a table tag).
How to fix it? How to control the properties of table 2?
it seems the browser gets the properties of .datatable class and applied it to table or td of the upper-level table (inheritance or some)..
The codepen is here: https://codepen.io/gzbqqfbl-the-encoder/pen/QWqrBxP

Those borders belong to the first td in the first table so something like this (put at the end of the stylesheet to override anything else that might be inserted above)
table:first-child tr td:first-child { border: none;}
Here it is in a snippet:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<title>Dietonline Service. Результаты расчета потребности в основных пищевых веществах и энергии </title>
<link href="style.css" rel="stylesheet">
<style>
html,
body {
background-color: White;
font-family: rubik, sans-serif, san-serif;
font-size: 14 px;
}
table.datatable {
border-collapse: collapse;
/* hiding double lines between cells */
border: 2px solid white;
/* hiding border of a table */
}
.datatable th,
td {
padding: 5px 10px;
border: 1px solid black;
/* adding a border for th and td */
}
.datatable th {
background-color: #EBECEC;
font-weight: bold;
vertical-align: bottom;
}
.datatable tr:nth-child(odd) {
background-color: #EBECEC;
}
h1,
h2,
h3 {
color: #36CA36
}
a:link {
text-decoration: underline;
color: #36CA36;
}
a:visited {
text-decoration: underline;
color: #36CA36;
}
a:hover {
text-decoration: none;
color: #FB6737;
}
a:active {
text-decoration: underline;
color: #36CA36;
}
table {
border-collapse: collapse;
/* hiding double lines between cells */
border: 0px solid grey;
/* hiding border of a table */
}
table:first-child tr td:first-child {
border: none;
}
</style>
</head>
<body style="margin: 0; padding: 0;">
<!--maintable-->
<table border="0" cellpadding="0" cellspacing="0" width="99%">
<tr>
<td>
<!-- 6oo px center table -->
<table align="center" cellpadding="0" cellspacing="0" width="600" border="0" style="border">
<tr>
<td align="center" bgcolor="#ffffff" style="padding: 20px 0 10px 0;">
<img src="img/sample_logo.jpg" width="200" style="display: block;">
<h3>Питание и Здоровье</h3>
</td>
</tr>
<tr>
<!--main content td-->
<td style="padding: 10px 15px 20px 15px;">
<h2>Результаты расчета индивидуальных потребностей основных пищевых веществ и энергии</h2>
<!--provided data-->
<table width=100% class="datatable">
<tr>
<th colspan='2'>Данные, предоставленные пользователем для расчета</th< /tr>
<tr>
<td>Пол</td>
<td>женский</td>
</tr>
<tr>
<td>Возраст</td>
<td>11</td>
</tr>
<tr>
<td>Вес</td>
<td>60</td>
</tr>
<tr>
<td>Коэффициент физической активности</td>
<td>1.4</td>
</tr>
<tr>
<td>Дополнительная информация</td>
<td>kid 6 year school</td>
</tr>
</table><br /> <a href='new_query?'>Неверно указаны параметры? Проведите еще один расчет ...</a>
<!--provided data end -->
<h3>Результаты расчета</h3>
<!-- proteins & energy table -->
<table width="100%" class="datatable">
<tr>
<th colspan="2">Суточная потребность в белках, жирах, углеводах и энергии</th>
</tr>
<tr>
<td>Энергия, ккал</td>
<td>2400.0</td>
</tr>
<tr>
<td>Белки, г</td>
<td>80.0</td>
</tr>
<tr>
<td>Белки животного происхождения, г</td>
<td>57.0</td>
</tr>
<tr>
<td>Жиры, г</td>
<td>78.0</td>
</tr>
<tr>
<td>Углеводы, г</td>
<td>346.0</td>
</tr>
</table>
<br />
<!--proteins and energy table end-->
<table width="100%" class="datatable">
<tr>
<th colspan="2">Суточная потребность в минералах</th>
</tr>
<tr>
<td>Кальций, мг</td>
<td>1200.0</td>
</tr>
<tr>
<td>Фосфор, мг</td>
<td>1200.0</td>
</tr>
<tr>
<td>Магний, мг</td>
<td>300.0</td>
</tr>
<tr>
<td>Железо, мг</td>
<td>17.0</td>
</tr>
<tr>
<td>Цинк, мг</td>
<td>12.0</td>
</tr>
<tr>
<td>Йод, мкг</td>
<td>160.0</td>
</tr>
<tr>
<td>Селен, мкг</td>
<td>55.0</td>
</tr>
<tr>
<td>Медь, мг</td>
<td>1.8</td>
</tr>
<tr>
<td>Марганец, мг</td>
<td>0.0</td>
</tr>
<tr>
<td>Хром, мкг</td>
<td>0.0</td>
</tr>
<tr>
<td>Молибден, мкг</td>
<td>0.0</td>
</tr>
</table><br />
<table width="100%" class="datatable">
<tr>
<th colspan="2">Суточная потребность в витаминах</th>
</tr>
<tr>
<td>Витамин А, мкг РЕ</td>
<td>600.0</td>
</tr>
<tr>
<td>Биотин, мкг</td>
<td>25.0</td>
</tr>
<tr>
<td>Пантотеновая кислота, мг</td>
<td>4.0</td>
</tr>
</table>
<br />
<table width="100%" class="datatable">
<tr>
<th colspan="2">Рекомендованные нормы потребления минорных и биологически активных веществ еды с установленным физиологическим действием на организм</th>
</tr>
<tr>
<td>Каротиноиды, мг</td>
<td>15</td>
</tr>
<tr>
<td>Бета-каротин, мг</td>
<td>5</td>
</tr>
</table>
<br />
</td>
</tr>
<tr>
<td bgcolor="#EBECEC" style="padding: 20px 20px 20px 20px;">
©Dietonline Service, 2022
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

html table border rendering problem on chrome

html table border rendering problem on chrome. I hava code like:
table {
border-collapse: collapse;
}
#first td {
width: 200px;
height: 80px;
border-style: dashed;
}
#second td {
width: 200px;
height: 80px;
border-style: solid;
border-color: rgba(0, 0, 0, 0.2);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table id="first">
<tr>
<td rowspan="4">b</td>
<td>c1</td>
</tr>
<tr>
<td>c2</td>
</tr>
<tr>
<td>c3</td>
</tr>
</table>
<br/>
<table id="second">
<tr>
<td rowspan="4">b</td>
<td>c1</td>
</tr>
<tr>
<td>c2</td>
</tr>
<tr>
<td>c3</td>
</tr>
</table>
</body>
</html>
On first table, the left border of c2 is looks like a solid line, while I set to td {border-style: dashed;}. I'm troubled.
On second table, why the left border of c2,c3 are darker then c1's on Chrome?
And how to fix them? All the test works fine in Firefox.

You can use solid color instead of used rgba color
td {
border-style: solid;
border-color:#ddd;
}
tr {
height: 80px;
}
col {
width: 200px;
}
table {
border-color: #ddd;
/* border-collapse: collapse; */
border-collapse: collapse;
}
<table cellpadding="0">
<colgroup>
<col />
<col />
</colgroup>
<tbody>
<tr>
<td rowspan="4">b</td>
<td>c1</td>
</tr>
<tr>
<td>c2</td>
</tr>
<tr>
<td>c3</td>
</tr>
<tr>
<td>c4</td>
</tr>
</tbody>
</table>

it because of you give opacity to border color.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
td {
border-style: solid;
border-color: #a3a3a3;
}
tr {
height: 80px;
}
col {
width: 200px;
}
table {
border-color: #a3a3a3;
border-collapse: collapse;
}
</style>
</head>
<body>
<table cellpadding="0">
<colgroup>
<col />
<col />
</colgroup>
<tbody>
<tr>
<td rowspan="4">b</td>
<td>c1</td>
</tr>
<tr>
<td>c2</td>
</tr>
<tr>
<td>c3</td>
</tr>
<tr>
<td>c4</td>
</tr>
</tbody>
</table>
</body>
</html>

Insted of using rgba -- border-color: rgba(0, 0, 0, 0.2); ====== use #c1c1c1 code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
td {
border: dashed 1px #c1c1c1;
}
tr {
height: 80px;
}
col {
width: 200px;
}
table {
border-collapse: collapse;
}
</style>
</head>
<body>
<table cellpadding="0">
<colgroup>
<col />
<col />
</colgroup>
<tbody>
<tr>
<td rowspan="4">b</td>
<td>c1</td>
</tr>
<tr>
<td>c2</td>
</tr>
<tr>
<td>c3</td>
</tr>
<tr>
<td>c4</td>
</tr>
</tbody>
</table>
</body>
</html>

Add vertical scroll wheel to HTML table

I have a basic table and would like to show the first 3 rows under the header, then provide a scroll wheel to display the remaining 2 rows.
I have tried setting the height of the table and using overflow: scroll in various places but cannot get to work. I wasn't sure if this property could even be used on tables or if it was just for divs.
My code is below, many thanks in advance for any help.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<style>
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 15px 100px;
}
</style>
<table>
<thead>
<tr>
<th>Name</th>
<th>DOB</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Smith</td>
<td>26.01.1989</td>
<td>john#email.com</td>
</tr>
<tr>
<td>Rick Thompson</td>
<td>15.04.1995</td>
<td>rick#email.com</td>
</tr>
<tr>
<td>Tim Bloggs</td>
<td>03.02.2000</td>
<td>tim#email.com</td>
</tr>
<tr>
<td>Bob Roberton</td>
<td>11.04.1985</td>
<td>bob#email.com</td>
</tr>
<tr>
<td>Joe Bishop</td>
<td>03.02.2010</td>
<td>joe#email.com</td>
</tr>
</tbody>
</table>
</body>

You have to put the table inside a div and then set the height of the div to be smaller than the height of your table and overflow-y: scroll.
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 15px 100px;
}
.table-wrap {
height: 222px;
overflow-y: scroll;
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="table-wrap">
<table>
<thead>
<tr>
<th>Name</th>
<th>DOB</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Smith</td>
<td>26.01.1989</td>
<td>john#email.com</td>
</tr>
<tr>
<td>Rick Thompson</td>
<td>15.04.1995</td>
<td>rick#email.com</td>
</tr>
<tr>
<td>Tim Bloggs</td>
<td>03.02.2000</td>
<td>tim#email.com</td>
</tr>
<tr>
<td>Bob Roberton</td>
<td>11.04.1985</td>
<td>bob#email.com</td>
</tr>
<tr>
<td>Joe Bishop</td>
<td>03.02.2010</td>
<td>joe#email.com</td>
</tr>
</tbody>
</table>
</div>
</body>

table {
border-collapse: collapse;
max-height: 50px;
overflow: auto;
}
th, td {
border: 1px solid black;
padding: 15px 100px;
}
<table>
<thead>
<tr>
<th>Name</th>
<th>DOB</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Smith</td>
<td>26.01.1989</td>
<td>john#email.com</td>
</tr>
<tr>
<td>Rick Thompson</td>
<td>15.04.1995</td>
<td>rick#email.com</td>
</tr>
<tr>
<td>Tim Bloggs</td>
<td>03.02.2000</td>
<td>tim#email.com</td>
</tr>
<tr>
<td>Bob Roberton</td>
<td>11.04.1985</td>
<td>bob#email.com</td>
</tr>
<tr>
<td>Joe Bishop</td>
<td>03.02.2010</td>
<td>joe#email.com</td>
</tr>
</tbody>
</table>

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

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

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;
}

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>

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;
}