Have data as below. Everything I put them in a Table in jsp.
how to draw the line below?
Employee Name : Tom
Dept : HHH
Office : Hudi
_____________________________ (How to draw this)
Cust Name : jjjj
Order : ppp
Thanks.<table style="border-collapse: collapse;">
<tr>
<td style="border-bottom: 1px solid #000;">Office:</td>
<td style="border-bottom: 1px solid #000;">Hudi</td>
</tr>
<tr>
<td>Cust Name::</td>
<td>jjjj</td>
</tr>
</table>Thankyou for your response
I tried giving below in css
.collapse-border {
border-collapse: collapse;
}
.lineBorder {
border-bottom: 1px solid #000;
}
In jsp
<table style="collapse-border">
.....
.....
<tr>
<td style="lineBorder">
<bean:message key="lbl.Orders"/> <bean:message key="colon"/>
</td>
<td style="lineBorder">
<html:checkbox name="Form1" property="orders" />
</td>
<td></td>
</tr>
...........
..........
</table>
But the line doesn't show.
What wrong in here?
Thanks.Shouldn't this
.lineBorder {
border-bottom: 1px solid #000;
}
be this
td.lineBorder {
border-bottom: 1px solid #000;
}
AND
this
<td style="lineBorder">
be this
<td class="lineBorder">
???
The way you've currently got it coded, you'd have to use a <div> to employ that lineborder class thing. I don't think that's what you're wanting....
KDLAthanks. that worked.
But there is a small gap between the columns like
______________________________ _________________________________
How to remove this gap?
Thanks.there you put style="border-collapse: collapse;"I already have this.
.collapse-border {
border-collapse: collapse;
}
<table style="collapse-border">
But still the gap exists.
What am I missing?
Thanks.It's the cell spacing and padding.
Make your CSS this
td.lineBorder {
border-bottom: 1px solid #000;
padding: 0;
margin: 0;
}
if you're using just a blank table cell as the divider.
KDLAthanks for your response.
that didn't work either.
What else can I try?
Thanks.It's unclear where the gap is and where the line should be.
Is this the intention:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Basic HTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
table {
border-collapse: collapse;
}
.lineBorder td {
border-bottom: 1px solid #9cf;
}
</style>
</head>
<body>
<table>
<tr class="lineBorder">
<td>lbl.Orders</td>
<td>checkbox</td>
<td></td>
</tr>
</table>
</body>
</html>thanks guys for helping me. got it wokring now.
table.collapse-border {
border-collapse: collapse;
}
table.collapse-border td.lineBorder {
border-bottom: 1px solid #000;
}
<table class="collapse-border">
.....
.....
<tr>
<td class="lineBorder">
<bean:message key="lbl.confirm"/> <bean:message key="colon"/>
</td>
<td class="lineBorder">
<html:checkbox name="Form1" property="confirm" />
</td>
<td></td>
</tr>
..........
....
</table>
how to draw the line below?
Employee Name : Tom
Dept : HHH
Office : Hudi
_____________________________ (How to draw this)
Cust Name : jjjj
Order : ppp
Thanks.<table style="border-collapse: collapse;">
<tr>
<td style="border-bottom: 1px solid #000;">Office:</td>
<td style="border-bottom: 1px solid #000;">Hudi</td>
</tr>
<tr>
<td>Cust Name::</td>
<td>jjjj</td>
</tr>
</table>Thankyou for your response
I tried giving below in css
.collapse-border {
border-collapse: collapse;
}
.lineBorder {
border-bottom: 1px solid #000;
}
In jsp
<table style="collapse-border">
.....
.....
<tr>
<td style="lineBorder">
<bean:message key="lbl.Orders"/> <bean:message key="colon"/>
</td>
<td style="lineBorder">
<html:checkbox name="Form1" property="orders" />
</td>
<td></td>
</tr>
...........
..........
</table>
But the line doesn't show.
What wrong in here?
Thanks.Shouldn't this
.lineBorder {
border-bottom: 1px solid #000;
}
be this
td.lineBorder {
border-bottom: 1px solid #000;
}
AND
this
<td style="lineBorder">
be this
<td class="lineBorder">
???
The way you've currently got it coded, you'd have to use a <div> to employ that lineborder class thing. I don't think that's what you're wanting....
KDLAthanks. that worked.
But there is a small gap between the columns like
______________________________ _________________________________
How to remove this gap?
Thanks.there you put style="border-collapse: collapse;"I already have this.
.collapse-border {
border-collapse: collapse;
}
<table style="collapse-border">
But still the gap exists.
What am I missing?
Thanks.It's the cell spacing and padding.
Make your CSS this
td.lineBorder {
border-bottom: 1px solid #000;
padding: 0;
margin: 0;
}
if you're using just a blank table cell as the divider.
KDLAthanks for your response.
that didn't work either.
What else can I try?
Thanks.It's unclear where the gap is and where the line should be.
Is this the intention:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Basic HTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
table {
border-collapse: collapse;
}
.lineBorder td {
border-bottom: 1px solid #9cf;
}
</style>
</head>
<body>
<table>
<tr class="lineBorder">
<td>lbl.Orders</td>
<td>checkbox</td>
<td></td>
</tr>
</table>
</body>
</html>thanks guys for helping me. got it wokring now.
table.collapse-border {
border-collapse: collapse;
}
table.collapse-border td.lineBorder {
border-bottom: 1px solid #000;
}
<table class="collapse-border">
.....
.....
<tr>
<td class="lineBorder">
<bean:message key="lbl.confirm"/> <bean:message key="colon"/>
</td>
<td class="lineBorder">
<html:checkbox name="Form1" property="confirm" />
</td>
<td></td>
</tr>
..........
....
</table>